Membuat Breadcrumb Diatas Postingan Blog

Breadcrumb biasanya terletak diatas postingan blog berbentuk link yang bermanfaat sebagai sebuah navigasi sederhana untuk  memudahkan pengunjung melihat postingan-postingan yang berkaitan dengan apa yang dia baca, selain itu dengan adanya breadcrumb maka akan sedikit membantu blog kita dalam hal SEO.

Namun sayangnya di blogger/blogspot tidak menyediakan fitur breadcrumb, tapi tenang saja karena kita masih dapat membuat breadcrumb sendiri dengan memanfaatkan label postingan dengan skema: 

Homepage » Label » Postingan

Untuk membuatnya silahkan anda ikuti tutorial berikut ini.

Tips: Untuk pencarian kode di editor HTML blogger silahkan anda gunakan tombol CTRL+F jika anda menggunakan komputer.

1.Pada menu utama blogger,com anda klik tema, seperti contoh gambar dibawah ini.

2.Berikutnya anda klik edit HTML seperti contoh gambar dibawah ini.

3.Silahkan anda copy CSS berikut ini.

.breadcrumbs{ padding:5px 5px 5px 0; margin:0; font-size: 90%; line-height:1.4em; border-bottom:1px solid black; }

Letakkan kode  CSS tersebut diatas kode

]]></b:skin>

4.Berikutnya, silahkan anda copy kode berikut ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Home</a> &gt; <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> &gt; <data:post.title/> </div> </b:if> </b:if>

Letakkan kode tersebuat dibawah kode

<b:includable id='post' var='post'>

5.Jika sudah, silahkan anda klik simpan, seperti contoh gambar dibawah ini.

Untuk melihat hasilnya silahkan anda kunjungi salah satu postingan di blog anda, jika telah muncul breadcrumb, maka anda telah berhasil membuat breadcrumb diatas postingan blog.

Demikianlah dan semoga bermanfaat.

Baca Juga

• 
  Cara Mengatur Posisi Gambar Pada Postingan Blog
• 
  Cara Membuat Link Didalam Postingan Blog
• 
  Cara Menerbitkan Postingan Blog
• 
  Cara Mengatur Ukuran Gambar Pada Postingan Blog
• 
  Cara Membuat Link Didalam Postingan Blog (Bagian ke-2)
• 
  Cara Membuat Link Didalam Postingan Blog (bagian ke-3)
• 
  Cara Memasukkan Video Kedalam Posting Blog
• 
  Cara Memasukkan Gambar Kedalam Postingan blogger