Breadcrumb merupakan salah satu bentuk navigation yang biasanya digunakan untuk memberitahukan pembaca dimana posisi dia berada sekarang (kategori/label). Dengan adanya breadcrumb maka akan memudahkan pembaca untuk berpindah ke bagian-bagian lain yang sejenis di kategori / lebal blog anda dan juga membuat template blog SEO friendly dan mempercantik desain blog. Saat ini, navigation breadcrume tidak lagi sebagai pemberitahuan bagi pembaca blog, tapi sudah menjadi suatu keharusan karena dapat menutupi salah satu kekurangan blogger, yaitu alamat url posting yang muncul terbatas dan kadang terlihat tidak enak dilihat mata. Sehingga blog kita di search engine akan terlihat lebih rapi, contohnya seperti dibawahi ini
Contoh Navigation Breadcrumb yang terindex di Google.com |
Langkah-langkah pemasangannya adalah sebagai berikut:
- Silahkan login ke blogger
- Klik Design.
- Klik tab edit HTML dan ceklist Expand Template Widget
- Kemudian cari kode ]]></b:skin>
- Setelah jumpa copy paste script dibawah ini di atas kode ]]></b:skin> tadi.
.breadcrumbs{
margin-left:10px;
padding: 5px 0;
border-bottom: 1px dotted;
line-height:1.4em;
}
- Kemudian, cari kode berikut ini <b:includable id='main' var='top'> , jika sudah ketemu timpa kode tersebut dengan kode dibawah ini.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
- Kemudian simpan. Untuk mengecek apakah navigation breadcrumb blog anda sudah terindex oleh google, cek menggunakan Rich Snippets Testing Tool
Selamat mencoba dan semoga bermamfaat.