Cara Membuat Breadcrumb Di Postingan Blog

Untuk mengetahui apa itu Breadcrumb ada baik nya kita pahami dulu pengertian nya dan juga fungsi dari breadcrumb ini sendiri.
Pengertian Breadcrumb yaitu menu navigasi yang letaknya berada di atas judul setiap postingan ini berguna untuk mempermudah para pengunjung untuk melihat label yang mencakup di postingan tersebut. (versi eljohn-us)
Sedangkan untuk fungsinya sendiri adalah untuk mengetahui pengunjung sedang dihalaman mana sekarang. Dengan kata lain kita sedang berada dilokasi yang kita tempati sekarang ini. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan.

Dan bagi Anda yang ingin membuat cara membuat breadcrumb di postingan blog seperti yang ada di blog saya ini, berikut cara-cara nya :

1. Masuk ke blogger.com, Pilih Tab Design, Pilih Tab Edit HTML, ceklis pada Expand Widget Templates.

2. Cari kode ini pada template anda. ]]></b:skin>

3. Copas kode berikut diatas kode ]]></b:skin> :

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

4. Cari kode berikut di template Anda. <b:includable id='post' var='post'>

5. Copas kode berikut dibawah kode <b:includable id='post' var='post'>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

6. Klik prtinjau terlebih dahulu jika tidak ada kesalahan,Klik Save Templates.
Sekian dulu tutorial untuk pembuatan breadcrumb di postingan blog , jika ada yang kurang paham atau pun bilamana ada kesalahan pada script di atas mohon agar di beritahu pada kotak komentar di bawah.
Terima Kasih.
Related Posts Plugin for WordPress, Blogger...