Cara Memasang Breadcumbs di Blogger

Breadcumbs adalah menu navigasi yang dapat memudahkan pengunjung untuk mengetahui keberadaan artikel yang mereka baca. Yang seperti bagaimana sih? Pernahkah kalian melihat tampilan seperti gambar dibawah ini di web-web yang pernah kalian kunjungi? Jika iya, berarti sekarang kalian sudah tahu apa itu yang namanya Breadcumbs.



Berhubung Cara Memasang Breadcumbs di Blogger ini merupakan salah satu teknik dari sekian banyak cara untuk memaksimalkan SEO pada website kita, maka pada postingan kali ini saya ingin membagikan cara untuk memasang Breadcumbs di template Blogger kepada kalian.

1. Loginlah ke akun Blogger kalian masing-masing, kemudian masuklah ke menu Dashboard -> Template -> Edit HTML. Kemudian centang pada bagian Expand Widget Templates.

2. Tekan CTRL + F untuk mencari kata kunci <b:includable id='main' var='top'>, lalu ganti kode tersebut dengan script berikut ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span><a expr:href='data:label.url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'/>

3. Setelah itu tekanlah CTRL + F lagi dan cari kata kunci ini ]]></b:skin>. Jika sudah ketemu, gantilah baris tersebut dengan script baru dibawah ini :

.breadcrumbs {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJ1z7Tk_PldTDYQSTib5w9fIeI87UycnyKEN_-zx6Gskf0A5BLKITYR8fjag2bRU0Myl2Ad-CPMsthgtNfRIo6Rh6PfBIAneYLMkBWP34hX1XUk3v8HpnljApsteVzvVnBF7b_CY-Mjo/s1600/box2-top.gif);
float: left;
border: 1px solid #E6E6E6;
width: 595px;
font-size: 11px;
margin: 0px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}
]]></b:skin>

4. Simpanlah perubahan yang telah kalian lakukan dengan mengklik Save Template.

Sekarang coba lihat website kalian pasti sudah muncul Breadcumbsnya :D



Semoga bermanfaat :)

SUMBER