Cara pasang Breadcrumb pada blogger

Sebelum menjelaskan tentang cara pasang breadcrumb pada bloger, tidak ada salahnya jika kita mengerti dulu apa itu breadcrumb karena seperti kata pepatah "tak kenal, maka tak sayang".

Breadcrumb merupakan bentuk navigasi yang dapat memudahkan user dalam mengetahui lokasi mereka berada pada suatu situs tertentu. Navigasi Breadcrumb ini biasanya ditampilkan secara horizontal dan biasanya diletakkan dibawah header atau juga diatas judul halaman.

Nah, sekarang anda sudah mengetahui apa itu breadcrumb dan untuk lebih memahaminya lagi dan mengetahui cara pasang breadcrumb pada blogger, praktekkan langkah dibawah ini :

1. Login ke account blogger
2. Pilih tab Rancangan --> Edit HTML
3. Sebelum melakukan perubahan pada template, biasakan untuk membackup terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.
4. Centang pada expand template widget
5. Copykan kode berikut ini tepat dibawah <div class='post hentry'> atau kode yang sejenis di template yang anda gunakan

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Sehingga kodenya jadi seperti dibawah ini:

<div class='post hentry'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Kode diatas menjelaskan bahwa jika kondisi pada Homepage maka tidak akan menampilkan breadcrumb tetapi jika kondisi pada single page maka breadcrumb akan ditampilkan.

6. Langkah selanjutnya adalah menambahkan CSS Style untuk breadcrumb.

.breadcrumbs {  
  padding:5px 5px 5px 0;  
  margin:0;  
  font-size:95%;  
  line-height:1.4em;  
  border-bottom:4px double #ccc}

letakan kode css diatas sebelum ]]></b:skin>

7. Simpan template anda.
8. Lihat perubahan dengan membuka salah satu posting.

Seperti itulah cara pasang breadcrumb pada blogger, dan untuk pengguna wordpress.org baca juga Cara pasang Breadcrumb pada wordpress.

Dapatkan update terbaru: * Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda