Cara Membuat Breadcrumb Di Blogger

Bagaimana Cara Bikin Navigasi Breadcrumb Di Blogger?

Sebelum Bli Tyan 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 kawan-kawan baca posting Panduan Cara Membuat Breadcrumbs Di WordPress. Pada artikel tersebut anda akan akan menemukan jawaban apa itu breadcrumb.

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 atas 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.

CATATAN : Sebelum anda melekukan perubahan kode-kode pada template anda, ada baiknya anda melakukan backup template terlebih dahulu :)

Mudah-mudahan bisa bermanfaat, dan mohon maaf jika ada yang kurang atau ada yang salah. Bagi teman-teman kolom komentar di bawah ini. Sampai jumpa di posting Blogger Tutorial Bli Tyan berikutnya :) Selamat mencoba dan semoga berhasil.

Please subscribe, leave a comment, follow this blog and share this article with your friends and colleagues.
by: http://blityan.blogspot.com

Share This On :

Tweet

Related Post :