Memasang menu navigasi Breadcrumbs di blog

Credit img: freepik.com

Memasang menu navigasi Breadcrumbs di blog bertujuan untuk memudahkan pengunjung menemukan informasi lain yang berkaitan dengan postingan. Sebagai contoh bila ada kata sub kelompok (label) di klik maka kita akan mendapatkan tambahan pageview dan mungkin postingan lain yang ada dalam list tersebut dapat diketemukan sehingga menjadi terbaca.

Berikut cara memasangnya :

Login ke blog> Template> Edit Html
Copy pastekan kode di bawah ini diatas kode ]]></b:skin>


.breadcrumbs {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CwKyigzJafF_z7VP5qnvk4BBpbb1-0A87Yrp7QH57C-5OSt01FoeVePb4CfsOpo458uLRv7MfQkvsOfbx1qUxbWwj5h-NQDlHP89ddvQaKABCR77OOXWoX-vb9sTE6iNIPVyZreOU7Q/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;
}


Kemudian ganti kode <b:includable id='main' var='top'> dengan kode di bawah 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'/>
Simpan.

Selamat mencoba..