Membuat Navigasi Breadcrumb di Blog

Memasang navigasi breadcrumb di Blog. (Jurnal Naim)

Navigasi Breadcrumb merupakan sebuah fitur opsional pada Blog atau Website yang sangat berguna bagi pengunjung. Biasanya fitur ini diletakkan di atas judul artikel agar pengunjung lebih mudah untuk memahami alur postingan dan juga ketegorinya.

Adanya navigasi breadcrumb dengan link aktif tentu dapat membantu page view Blog Anda karena ada potensi pengunjung menekan kategori tersebut, apalgi jika artikel yang Anda tulis berkualitas.

Cara Menambah Breadcrumb

Catatan: Artikel ini ditulis kali pertama pada tahun 2010 lalu dan mungkin kode yang ada sudah kurang up-to-date.

Pertama, masuk ke menu Theme. Ada baiknya Anda lakukan Backup template terlebih dahulu sebagai langkah antisipasi apabila terdapat error atau kesalahan yang muncul nantinya. Caranya dengan menekan tombol Backup.

Backup, Restore, dan Edit HTML. (Jurnal Naim)

Setelah proses Backup selesai, masuk ke Edit HTML.

Carilah kode dibawah ini pada template Anda. Agar lebih mudah, Anda bisa menekan tombol Ctrl + F untuk mencarinya.

]]></b:skin>

Setelah menemukannya, paste kode CSS berikut ini diatas kode tersebut.

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

Selanjutnya, cari kode dibawah ini.

<div class='post hentry uncustomized-post-template'>

Setelah menemukannya, paste kode berikut dibawah kode tersebut.

<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' 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 == &quot;true&quot;'>
                     &#187;
                     <a expr:href='data:label.url' rel='tag'>
                        <data:label.name/>
                     </a>
                  </b:if>
                  &#187; 
                  <span>
                     <data:post.title/>
                  </span>
               </b:loop>
            </b:if>
         </b:loop>
      </div>
   </b:if>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div class='breadcrumbs'>
         Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for 
         <data:blog.pageName/>
      </div>
   </b:if>
   <b:else/>
   <b:if cond='data:navMessage'>
      <div class='breadcrumbs'>
         <data:navMessage/>
      </div>
   </b:if>
</b:if>

Klik Simpan, dan lihatlah salah satu postingan Anda yang memiliki label untuk memastikan bahwa navigasi breadcrumb sudah berfungsi.