Widged tentunya sangat penting untuk mempercantik tampilan blogger nah pada postingan ini saya akan share beberapa situs widged gratis untuk blog anda jika anda tertarik untuk mencobanya silahkan kunjungi sits situs dibawah ini...
Assalamualaikum pada kesempatan ini saya akan share mengenai cara membuat twitter box melayang untuk blog tentu dengan cara yang sangat gampang dan sederhanajika agan berminat menggunakannya silahkan ikuti langkah dibawah ini...
Masuk blog agan
pilih menu tata letak/add gadged
kemudian pilih html javascript
jika sudah letakan kode dibawah ini pada box yang telah tersedia
Catatan : kode warna biru menunjukan warna box twitter silahkan ganti dengan warna kesukaan agan untuk kode warnanya kode warna merah merupakan user name twitter silahkan diganti dengan user name agan
Selesai silahkan simpan template agan dan lihat hasilnya... Selamat mencoba semoga bermanfaat...
Assalamualaikum pada kesempatan ini saya akan share mengenai cara membuat sharing button widged dengan tampilan baru di blog anda sebenarnya ada banyak sekali tampilan tampilan menawan yang ditawarkan oleh widged ini tetapi mungkin apa yang akan saya bagikan sekarng bisa menjadi salah satu pilihan anda jika anda tertarik silahkan ikuti langkah dibawah ini....
Masuk blog anda pilih menu tata letak/add gadged kemudian pilih html javascript setelah itu letakan kode dibawah ini pada box yang tersedia
<a href="https://www.twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQloEYNkj1q6ESUBHYPgYQ6l_xG_n0mtPo7s-Yh_OKqYvhafYnrFqYRBWwtlebKOXiY_5QortezI8Y1N3__SUg_tXpJrcvosDA5hbibB_ZUX1hJQj7CC0hT9vB9JCPREojjwmpjl6kXo/h120/Twitter-Home.png" title="Follow Our Updates On Twitter" /></a>
<a href="https://plus.google.com/u/0/112756918350798570373"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSMTVx2_3Vhxn46bZEYxZjwQ2hp0AX64Q4MozeVkG6Az1OSWFjc3SQ4og2rVS3VQvr3tv7luGE_Tkzj5rFWHFq_CPqDgqUibmGS7LvTRdLUjvyZnB3YA5ycD0oIvOlc4I6tvODKczWaAo/h120/Google-Social-store.gif" title="Follow Us On Google+" /></a>
Catatan : saya kira agan sudah mengerti silahkan ganti kode yang berwarna merah sesuai dengan akun agan masing - masing setelah itu simpan template agan dan lihat hasilnya.. semoga agan menyukainya selamat mencoba semoga bermanfaat....
Assalamualaikum Pada kesempatan ini saya akan share mengenai cara membuat tombol back to top dengan menggunakan css dan jQuery caranya cukup sederhana jadi mudah untuk diterapkan
nah jika tertarik lansung saja ikuti langkah dibawah ini
Masuk blog agan pilih menu template/edit html kemudian gunakan ctrl + f untuk menemukan kode </body> jika sudah ketemu letakan kode dibawah ini diatas tag </body>
Catatan : silahkan hapus kode berwarna merah jika sebelumnya sudah ada di template anda
Selanjutnya gerakan kursor kebagian atas untuk menemukan kode ]]></b:skin> jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>
/* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distance between the border and the icon */ background-color:Darkred; border:1px solid #CCC; /* Border Color */ position:fixed; background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BU-Xg2ObTtBEYJ_nu4AX-QbSx0jTDz8WNZ1UtlmlW9gEXCskEuG0SID5lHnyGgxSAIGsWZfYnEDl4KWS4CyfwY5E_8YJScBBnSQD63yXXV0XHWCYS17zT4iCgkVlddNkOPrTMsM4u_k/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px; /* Distance between the border and the icon */ background-color:Darkred; border:1px solid #CCC; /* Border Color */ position:fixed; background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsluDyjDC7gsJsjqxLVme806EScmJzv7_-UiCRIaevBJ5nZMMcuE6xFWLnF90GHdG5vGsHH8DJZYsBtwcdGza8pCsSApl1WewCTcoXgPSrNoFkr0ger3P0C7Cqzn0rfJoLEUKDsOL1BE/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }
Terakhir silahkan simpan template anda dan lihat hasinya selamat mencoba semoga bermanfaat.....
Assalamualaikum jika kemaren saya membagikan cara membuat daftar isi dengan tema galery Pada kesempatan ini saya akan share mengenai cara membuat daftar isi tetapi dengan tampilan sedikit berbeda dengan daftar isi daftar isi sebelumnya langkahnya tidak jauh beda dengan daftar isi yang lain lansung saja gan kita ke langkah pembuatannya....
Masuk blog anda pilih menu laman/laman baru kemudian pada box postingan pilih mode html
Jika sudah segera letakan kode dibawah ini pada box yang tersedia
Pada Postingan ini saya akan share mengenai cara membuat Recent post terbaru dilengkapi dengan fungsi next previous ok lansung aja gan untuk menampilkannya sangat gampang kok gan silahkan agan ikuti langkah laqngkah dibawah ini...
masuk blog agan pilih menu template segera cari kode </head> dengan menggunakan ctrl + f jika sudah letakan kode dibawah ini diatas tag </head>
<script type='text/javascript'> //<![CDATA[ var numfeed = 5; var startfeed = 0; var urlblog = "http://ngeblogbarengbareng.blogspot.com"; var charac = 100; var urlprevious, urlnext;
function dhffeed(dharla, banget) { var showfeed = dharla.split("<"); for (var i = 0; i < showfeed.length; i++) { if (showfeed[i].indexOf(">") != -1) { showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length); } } showfeed = showfeed.join(""); showfeed = showfeed.substring(0, banget - 1); return showfeed; }
function showterbaru(json) { var entry, posttitle, posturl, postimg, postcontent; var showblogfeed = ""; urlprevious = ""; urlnext = ""; for (var k = 0; k < json.feed.link.length; k++) { if (json.feed.link[k].rel == 'previous') { urlprevious = json.feed.link[k].href; } if (json.feed.link[k].rel == 'next') { urlnext = json.feed.link[k].href; } } for (var i = 0; i < numfeed; i++) { if (i == json.feed.entry.length) { break; } entry = json.feed.entry[i]; posttitle = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } if ("content" in entry) { postcontent = entry.content.$t; } else if ("summary" in entry) { postcontent = entry.summary.$t; } else { postcontent = ""; } if ("media$thumbnail" in entry) { postimg = entry.media$thumbnail.url; } else { postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1gRFtBpPzznFIhBaLMPXsJFM94JdB9Utsjwm_OmgIso_bdgDvLlJHXx-4HwKtevHdsi-1zuQky4Nh4BcVvQaOpU36sWYw-pldtRlDxdqKYte3k_Bh_LnJX6KcKbpbq8BeOQ5RZoavWw/s1600/no+image.jpg"; } showblogfeed += "<div class='dhf-elemen'>"; showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>"; showblogfeed += "<p>" + dhffeed(postcontent, charac) + "...</p>"; showblogfeed += "</div>"; } document.getElementById("terbaru").innerHTML = showblogfeed; showblogfeed = ""; if (urlprevious) { showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>"; } else { showblogfeed += "<span class='noactived previous'>◄ Previous</span>"; } if (urlnext) { showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>"; } else { showblogfeed += "<span class='noactived next'>Next ►</span>"; } showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>"; document.getElementById("dhf-navigasifeed").innerHTML = showblogfeed; }
function navigasifeed(url) { var p, parameter; if (url == -1) { p = urlprevious.indexOf("?"); parameter = urlprevious.substring(p); } else if (url == 1) { p = urlnext.indexOf("?"); parameter = urlnext.substring(p); } else { parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script" } parameter += "&callback=showterbaru"; incluirscript(parameter); }
function incluirscript(parameter) { if (startfeed == 1) { removerscript(); } document.getElementById("terbaru").innerHTML = "<div id='dhf-loading'></div>"; document.getElementById("dhf-navigasifeed").innerHTML = ""; var archievefeed = urlblog + "/feeds/posts/default" + parameter; var terbaru = document.createElement('script'); terbaru.setAttribute('type', 'text/javascript'); terbaru.setAttribute('src', archievefeed); terbaru.setAttribute('id', 'DHFLABEL'); document.getElementsByTagName('head')[0].appendChild(terbaru); startfeed = 1; }
function removerscript() { var elemen = document.getElementById("DHFLABEL"); var parent = elemen.parentNode; parent.removeChild(elemen); } onload = function () { navigasifeed(0); } //]]> </script>
Setelah itu barilah keatas halaman untuk mencari kode ]]></b:skin> jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>
Pada kesempatan ini saya akan membagikan sedikit trips untuk memodifikasi tampilan Google+ Followers jika anda bosan dengan tampilan widged anda yang masih standar maka tidak ada salahnya anda mencoba widged yang satu ini gan tampilannya cukup enak dimata hehehe... lansung aja ke langkah langkahnya gan...
Masuk blog agan pilih menu tata letak/add gadged pilih html javascript jika sudah silahkan letakan kode dibawah ini pada box yang tersedia
Catatan : Silahkan disesuaikan kode yang saya tandai dengan warna merah misalnya pada ID google plus silahkan diganti dengan ID google plus anda pasti agan sudah tau dach hehehe silahkan berkreasi sendiri...
Terakhir silahkan simpan template anda dan lihat hasilnya selamat mencoba semoga hasilnya memuaskan dan bermanfat.....
Padapostingan ini saya akan share sedikit mengenai cara menampilkan spoiler pada postingan spoiler pada postingan ini sangat membantu untuk menampung kode yang terlalu panjang pada postingan kita jika agan berminat menggunakannya silahkan ikuti angkah dibawah ini...
Caranya sangat gampang gan silahkan agan sisipkan kode dibawah ini pada postingan agan
Pada kesempatan ini saya akan share mengenai tata cara membuat spoiler sederhana untuk blog anda ada beberapa blogger yang memakai widged terlalu banyak pada halaman blog mereka sehingga akan merusak pandangan padatampilan blog tersebut nah untuk itu spoiler ini sangat bermanfaat untuk menampung widged yang berlebihan pada blog anda misalnya banner sahabat ataupun widged lain jika anda berminat menggunakannya silahkan ikuti langkah dibawah ini...
Masuk blog anda pilih menu template/edit html kemudian cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>
Untuk Menjalankan fungsi Spoilernya tentunya memrlukan kode pemanggil Nah masuk pada halaman tata letak/add gadged kemudian letakan kode dibawah ini pada box yang tersedia
Pada postingan kali ini kita akan beljar membuat tampilan berbeda pada label blog dengan menambahkan icon berdera yang unik hanya dengan beberapa ode css saja untuk membuat tampilan seperti ini..baiklah gan lansung saja ke tutorialnya...
Masuk blog anda pilih menu template/edit html cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian jika sudah ketemu segera letakan kode dibawah ini diatas tag ]]></b:skin>
#Label1 ul{ list-style:none outside none; margin:0 auto; padding:0; width:98%; } #Label1 ul li{ padding:5px 0; } #Label1 ul li a{ background:url('https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/flag-icon-label.png') no-repeat scroll left center transparent; display: inline-block; padding-left: 20px; transition:0.5s ease; -o-transition:0.5s ease; -ms-transition:0.5s ease; -moz-transition:0.5s ease; -webkit-transition:0.5s ease; } #Label1 ul li a:hover{ margin-left:20px; }
Jika sudah silahkan simpan template anda dan lihat hasilnya... selamat mencoba semgoga bermanfaat.....
kali ini saya akan share mengenai cara membuat menu veertical keren untuk blog menu vertical indah akan segera mewarnai tampilan blog anda hanya dengan beberapa tambahan kode CSS saja jika anda tertarik menggunakannya silahkan ikuti langkah langkah dibawah ini...
Masuk ke blog anda pilih menu template/edit html kemudian cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan sobat jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>
<style type="text/css">
.urbangreymenu{ width: 190px; /*width of menu*/ }
.urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(http://img407.imageshack.us/img407/6162/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/ margin-bottom: 0; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 7px 0 7px 31px; /*31px is left indentation of header text*/ }
.urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ }
.urbangreymenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ }
.urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /*link text is indented 8px*/ text-decoration: none; }
.urbangreymenu ul li a:visited{ color: black; }
.urbangreymenu ul li a:hover{ /*hover state CSS*/ color: white; background: black; }
</style>
Setelah itu silahkan simpan template anda terlebih dahulu kemudian kita beralih ke menu tata letak/add gadged letakan semua kode dibawah ini pada box yang tersedia
Catatan : silahkan sesuaikan kode tersebuat dengan nama dan URL tujuan menu masing masing kode berwarna merah merupakan nama menu dan yang berwarna kuning URL tujuan
Saya kira penjelasannya sudah cukup jelas silahkan dicoba semoga bermanfaat....
Pada postingan ini saya saya akan share tentang bagaimana cara menambahkan tombol sosial media keren di blog menggunakan CSS 3 caranya sangat mudah gan dan agan patut mencobanya hehe...
baikalah gan lansung saja pada langkah langkahnya..
Masuk blog agan pilih menu template/edit html cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian jika sudah ketemu lansung aja letakan kode dibawah ini tepat diatas tag ]]></b:skin>
.bubblewrap li img{ width: 55px; /* width of each image.*/ height: 60px; /* height of each image.*/ border:0; margin-right: 12px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ }
.bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }
Setelah itu silahkan save template anda terlebih dahulu kemudian kita beralih ke munu tata letak/add gadged lalu letakan kode dibawah ini pada box yang tersedia
Saat ini terdiri dari 6 jenis tampilan yang bisa Anda sesuaikan sendiri. Widget ini merupakan pengembangan dari konsep random post ringan yang pernah Saya tuliskan . Hanya saja, karena pemanggilan feed posting difilter melalui label posting yang spesifik, maka widget random post ini sekarang bisa dijadikan sebagai widget artikel terkait (random post dengan sortir label otomatis berdasarkan posting). Widget-widget artikel terkait yang lama kurang bersahabat menurut Saya, sehingga Saya membuatnya lagi secara pribadi. Dan untuk menyingkat jumlah posting, maka model-model widget artikel terkait yang sudah populer kini telah Saya gabungkan menjadi satu kesatuan. Tujuan utamanya tetap. Mencoba untuk menampilkan posting-posting lama dengan jarak waktu penerbitan yang tidak terbatas namun dengan tenaga sesedikit mungkin:
Klik tombol Preview & Get Code! Di situ nanti Anda akan mendapatkan kode CSS dan XML template. Masuk ke halaman editor HTML template kemudian letakkan kode CSS yang dihasilkan di atas kode ]]></b:skin>. Kode XML bisa Anda letakkan di mana saja di dalam elemen <b:includable id='post' var='post'/>, tapi Saya sarankan untuk meletakkan kode tersebut di atas kode ini karena posisinya yang mudah ditemukan dan lebih minim resiko:
<divclass='post-footer'>
Tabel Pengaturan
Pengaturannya tidak banyak, dan karena Saya sudah membuat generatornya, jadi Anda sebenarnya tidak perlu lagi menyentuh variabel-variabel di dalam widget ini secara langsung. Tabel ini Saya buat untuk kepentingan dokumentasi saja:
Opsi
Keterangan
widgetStyle
Kode model widget artikel terkait berupa angka. Mengubah nilai variabel ini akan mengubah markup HTML widget, sehingga kode CSS harus disesuaikan ulang. Lebih baik gunakan generator.
homePage
Digunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen <data:blog.homepageUrl/>
widgetTitle
Markup HTML untuk judul/kepala widget. Bisa digunakan untuk menyisipkan kode HTML lain juga jika mau. Kode tersebut nantinya akan tampil di atas daftar item posting di dalam widget.
numPosts
Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
summaryLength
Digunakan untuk menentukan panjang karakter ringkasan posting.
titleLength
Digunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi "auto" untuk menonaktifkan pemotongan karakter pada judul posting.
thumbnailSize
Digunakan untuk menentukan lebar/tinggi thumbnail posting yang berbentuk kotak.
noImage
Isi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar.
containerId
ID elemen HTML untuk menampung daftar posting yang berhasil terpanggil.
newTabLink
Ubah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik.
moreText
Teks “Baca Selengkapnya”.
callBack
Fungsi tambahan yang akan bekerja setelah daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah.
Menerapkan Fungsi callBack Widget
Opsi ini berfungsi untuk menciptakan perilaku tambahan pada widget. Fungsi ini akan bekerja setelah widget berhasil dimuat. Cocok digunakan untuk menambahkan efek-efek khusus. Dasar penerapannya adalah seperti ini. Kode di bawah ini akan menampilkan pesan peringatan bahwa widget telah berhasil termuat jika widget berhasil termuat:
Dan seterusnya. Buat efek-efek baru yang lain sesuka hati melalui opsi callBack.
Catatan: Saat menerapkan beberapa fungsi di atas, mungkin template Anda nanti menjadi tidak bisa disimpan. Cobalah untuk mengelilingi fungsi callBack dengan komentar CDATA seperti ini:
var relatedPostConfig = { callBack: function() { //<![CDATA[
Pada kesempatan ini saya akan share sedikit mengenai cara membuat daftar isi galery keren di blog pada dasarnya kode yang digunakan cukup simple dan ringan jika agan berminat lansung saja ikuti langkah langkahnya dibawah ini...
Masuk blog agan
pilih menu Laman/Laman Kosong
Lalu pada Kolom postingan Pilih Mode Html
Jika Sudah Letakan kode dibawah ini pada laman yang telah tersedia
// JSON Configuration viewMode: "summary", // Widget mode? "summary" || "thumbnail" homePage: "http://nama_blog.blogspot.com", // Your blog homepage numPosts: 10, // Number of posts to display per request numChars: 270, // Length of summary post squareImage: false, // Set thumbnail mode to square newTabLink: false, // Auto open links in new window/tab? columnWidth: 200, // Width of the image (also will resize the brick item width) subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR` monthNames: [ // Month array "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], commentLabel: " ", // Label text after total comments navText: { prev: "Sebelumnya", // Previous navigation label next: "Berikutnya", // Next navigation label disabled: "×", // Disabled navigation label data: ["Halaman ", " dari "] // `Halaman # dari #` }, postCategory: null, // Change to a label name to sort posts by specific label fallbackThumb: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png", // Fallback thumbnail for posts without images loadingText: "Loading...", // `Loading...` text for loading indicator loadedText: "Loaded.", // `Loaded.` text for loading indicator infiniteScroll: false, // Enable infinite scroll? bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll
// Shortcuts for Masonry Plugin Configuration (And Some Local Configuration) masonryConfig: { itemSelector: '.json_post', fadeSpeed: 400, // Speed of thumbnail fading effect resizeSpeed: 1000, // Speed of thumbnail resizing effect isAnimated: false, animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`? animationOptions: { queue: false, duration: 1000, easing: null }, isFitWidth: true, gutterWidth: 0, isRTL: false }
}); //]]> </script>
Catatan : silahkan anda ganti kode berwarna kuning dengan Url blog anda
Pada postingan ini kita akan belajar tentang tata cara menambah daya pikat blog kita dengan menu cantik yang elegan di blog menu ini berbentuk icon icon yang sangat indah dari hasil penambahan css dan jQuery baiklah sobat lansung saja ke pembahasannya..
Masuk blog anda pilih menu template cari kode ]]></b:skin> gunakan ctrl + f untuk mempermudah anda jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>
$('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-85px'},200); } ); }); </script>
Dan yang terakhir cari kode </body> biasanya kode ini berada pada deretan bawah atau gunakan ctrl + f agar lebih mudah jika sudah ketemu letakan kode dibawah ini diatas tag </body>
<ul id="navigation">
<li class="home"><a href="Kode anda disini" title="Home"></a></li>
<li class="about"><a href="Kode anda disini" title="About"></a></li>
<li class="search"><a href="Kode anda disini" title="Search"></a></li>
<li class="photos"><a href="Kode anda disini" title="Photos"></a></li>
<li class="rssfeed"><a href="Kode anda disini" title="Rss Feed"></a></li>
<li class="podcasts"><a href="Kode anda disini" title="Podcasts"></a></li>
<li class="contact"><a href="Kode anda disini" title="Contact"></a></li>
</ul>
Catatan : silahkan sesuaikan kode berwarna merah dengan kode anda masing masing
Saya kira penjelasannya sudah cukup jelas selamat mencoba semoga bermanfaat..