Mengenal Navigasi Breadcumb dan Cara memasangnya

Artikel Terkait

Ide Bisnis Blogger kali ini akan berbagi tentang Mengenal Navigasi Breadcumb dan Cara memasangnya. Apa itu navigasi breadcumb? pada artikel Modifikasi template Blogger supaya SEO Friendly sebelumnya, telah dibahas sedikit tentang navigasi breadcum. Navigasi Breadcumb layaknya sebuah Rambu lalu lintas, atau juga bisa dikatankan Sebuah Peta yang memberikan informasi mengenai keberadaan pengunjung suatu Blog. kurang lebih seperti itulah sedikit penjelasan tambahan mengenai navigasi Breadcumb. Contoh navigasi Breadcumb Bisa Dilihat Pada gambar diatas.

Cara Memasang Navigasi Breadcumb adalah sebagai berikut.

1. Rancangan >> Edit HTML >> Expand Template Widget

2. temukan kode berikut :  <b:include data='top' name='status-message'/> 

tip : setelah anda meng-copy tekan Ctrl + f  kemudian tekan Ctrl+v pada kotak pecarian yang muncul.

3. Setelah dapat, ganti kode di atas dengan kode di bawah ini

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

4. setelah itu temukan lagi kode berikut : <b:includable id='main' var='top'>
5. Setelah dapat, kemudian, ganti dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

6. Setelah itu, cari kode berikut : ]]></b:skin>

7. setlah dapat, kemudian ganti dengan kode dibawah ini

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin> 

8. Selanjutnya, klik Simpan, kemudian lihat Hasilnya.