Breadcrumbs adalah penunjuk halaman blog yang sedang dibuka, berupa link horizontal yang berurutan dari Home >> label >> judul posting/ judul halaman yang sedang dibuka. Breadcrumbs pada umumnya terletak di atas posting.
Fungsi Breadcrumbs
Breadcrumbs berfungsi mempermudah pengunjung menemumakan lokasi halaman web/blog dan kembali ke awal halaman (home page) dengan mudah. Membuat breadcrumbs berarti menyediakan fitur one click acses ke level halaman blog diatasnya dan menghindarkan pengunjung tersesat ke halaman yang sebenarnya tidak ingin dibukanya.Selain itu memasang breadcrumbs juga sangat membantu SEO blog karena dapat mempercepat postingan terindeks google. Tampilan di halaman pencarian google, bagi blog pemasang breadcrumbs juga akan sedikti berbeda. Coba lihat screenshot berikut;
Cara Memasang Breadcrumbs
1. Login ke blogger >> Template >> Edit Html
(lebih baik back up dulu template untuk menghindari kesalahan)
2. Centang kotak Expand widget templates
3. Cari kode : <b:includable id='main' var='top'> gunakan CTRL + F untuk mempermudah.
4. Ganti kode : <b:includable id='main' var='top'> dengan kode berikut 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'/>
5. Cari kode : ]]></b:skin>
6. Kopi kode di bawah ini dan paste tepat di atas kode: ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
7. Jika anda ragu, coba klik Pratinjau dulu
8. Sudah tidak ada masalah klik Simpan Template.
Nah inilah screenshot di halaman pencarian google beberapa menit setelah artikel ini saya publis.
