Cara Membuat Breadcrumb Di Blogger

Bagaimana Cara Bikin Navigasi Breadcrumb Di Blogger?

Sebelum saya teruskan menulis Cara Membuat Breadcrumb Di Blogger mungkin ada yang masih belum tahu apa itu Breadcrumb, jika masih belum tahu apa yang di maksud dengan breadcrumb silahkan ihat contohnya ada di blog ini, yang ada di atas judul artikel itu lo.

Okey mari kita mulai...

Cara Mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger

Langkah Pertama yang harus anda lakukan adalah login ke blogspot.com, kemudian Pilih menu Tata Letak (Layout) =>> Edit HTML, setelah anda berada di halaman Edit Html silahkan Centang bagian yang ada tulisan Expand Widget Templates.

Sekarang Cari Kode Ini

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

Kemudian letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<em>Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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> / <a expr:href='data:post.link'><data:post.title/></a></em>

Setelah itu silahkan simpan pengaturan template anda.

Catatan* Breadcrumb tersebut hanya akan terlihat di halaman artikel (post page) saja.

Itu adalah cara mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger, selain cara di atasa anda bisa juga menggunakan cara lain yaitu dengan menambahkan sedikit kode CSS di template blogger anda.

Cara Pasang Breadcrumb Di Blogger + Kode CSS

Sebenarnya cara ini hampir sama dengan cara pertama, naun perbedaannya adalah cara ini di sertai dengan kode css.

Silahkan ikuti langkah-langkah di atas, setelah anda sampai pada bagian Expand Widget Templates maka lanjutkan dengan tutorial berikut.

Cari kode ini ]]></b:skin>

Pasang kode CSS berikut tepat di atas kode ]]></b:skin> tadi

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

Kemudian cari kode <b:includable id='post' var='post'&gt
Setelah itu letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<div class='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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> / <a expr:href='data:post.link'><data:post.title/></a>
</div>

Kemudian silahkan simpan perubahan template anda dan silahkan cek di halaman artikel (post page) apakah Breadcrumb sudah ada.

Jika di saat anda menyimpan template timbul pesan eror atau perubahannya tidak bisa di simpan silahkan cek kembali pengaturannya apakah sudah sesuai atau belum dengan tutorial yang tertulis di sini.