Cara Membuat Navigasi Breadcumb Di Blogger

Setelah saya membaca baca mencari artikel yang cukup menarik, akhirnya saya tertarik untuk memposting "Cara Membuat Navigasi Breadcumb Di Blogger". Apa itu? lihatlah gambar berikut

Preview

Ya seperti yang saya lingkari itulah yang dinamakan Breadcumb Navigation. Cara ini cukup bermanfaat sebagai penunjuk navigasi untuk pengunjung. Selain itu, Breadcumb Navigation ini bisa digunakan untuk mengoptimalkan halaman blog di search engine (SEO) bahkan ini merupakan rekomendasi dari Google.

Oke cukup reviewnya. Cara membuatnya cukup mudah, oke mari kita buat bersama sama..
1. Login ke blog --> Rancangan --> Edit HTML klik Expand Template Widget untuk memberikan tanda centang pada kotak.
2. Cari kode  <b:if cond='data:post.title'> (gunakan F3 atau Ctrl+F)
3. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

 Next, mari kita membuat style dari Breadcumb
1. Cari kode ]]></b:skin>
2. Letakkan kode berikut diatas kode ]]></b:skin>

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:95%;
line-height: 1.2em;
border-bottom:2px double #000000;
}

Ganti kode yang telah saya beri warna coklat dengan kode yang anda inginkan (sesuaikan dengan blog anda).
Sekian, selamat mencoba dan semoga bermanfaat..

Tweet

Artikel Terkait: