Cara Memasang Menu Breadcrumbs Di Blogspot

Zona Internetku No Comment September 12, 2018

Cara Membuat Menu Breadcrumbs Di Blogspot. Breadcrumbs merupakan sebuah menu atau widget pada blog yang berupa link internal dan navigasi blog yang menampilkan URL Home, Label, Dan Judul Postingan, bahkan widget breadcrumb bisa juga tampil di halaman pencarian dalam blog, archive dan label.
Untuk lebih jelasnya saya akan menunjukkan tutorialnya untuk menambahkan menu breadcrumbs di atas judul postingan blog

Cara Memasang Menu Breadcrumbs Pada Blogspot Di Atas Postingan Blog

1. Cari kode <b:includable id='breadcrumb' var='post'>...</b:includable> dan ganti kode tersebut dengan kode berikut ini

             <b:includable id='breadcrumb' var='post'>
<!--breadcrumbs-->
<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' title='Home'>Home</a></span> &gt; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'><span>Home</span></a></span>
<b:loop values='data:post.labels' var='label'> | <span><a expr:href='data:label.url + &quot;?max-results=7&quot;' expr:title='data:label.name'><span><data:label.name/></span></a></span>
</b:loop> | <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> | <span>Without Label</span> | <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> | <span>Archived 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' title='Home'>Home</a></span> | <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> | <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Breadcrumbs end --></b:includable>

2. Sekarang kita akan memanggil kode tersebut di tempat yang akan kita tentukan, contohnya saya akan meletakkannya di atas postingan maka kita perlu masuk ke dalam kode <b:includable id='main' var='top'>...</b:includable>
selanjutnya cari kode <div class='blog-posts hfeed'> dan letakkan kode berikut ini

<b:include data='top' name='breadcrumb'/>

3. Setelah itu kalian tambahkan kode CSS berikut ini supaya tampilannya lebih indah lagi
Cari kode </head> dan letakkan kode berikut ini di atasnya

<style>
/* Breadcrumbs */
.breadcrumbs{padding:4px 10px 10px 10px;background:#fff;margin-bottom:10px;border:solid #e4e4e4 1px}
.breadcrumbs a,.post-info a{color:#19abea}
.breadcrumbs a:hover,.post-info a:hover{color:#454545}
</style>

dan sekarang silahkan anda klik "Simpan Tema" untuk menyimpan hasilnya