Tutorial Lengkap Breadcrumb Blogspot

Mungkin sudah terlampau banyak tutorial yang membahas mengenai optimasi blog yang satu ini, akan tetapi, postingan ini juga sekaligus merupakan dokumentasi saya dalam belajar bloging. Saya memang masih belum semahir O-om, belum sekreatif mas Ladida dalam design blognya. Akan tetapi, toh tidak ada salahnya juga. Hem, saya bingung untuk memberi judul apa dengan postingan kali ini, ya sudah, akhirnya saya beri judul "Tutorial Lengkap Breadcrumb Blogspot".

Sebelum kita beranjak terlampau jauh, ada baiknya kita mengenal apa sieh yang namanya Breadcrumb itu? Dan apa juga kegunaannya??? Yuk mari yuk,,

Breadcrumb atau breadcrumb trail merupakan salah satu navigasi agar memudahkan para pengunjung website atau blog untuk browsing di website atau blog Anda. Yah, demikian tadi makna yang saya bisa cerna sewaktu saya membaca tulisan di Wikipedia. [Lihat di bagian bawah postingan untuk keterangan lebih lengkap]. Pada umumnya, breadcrumb menggunakan sistematika seperti ini :

Home > Kategori Utama > Sub Kategori > Judul Tulisan.

Breadcrumb Blogspot

Selama saya browsing di dunia maya, sebetulnya banyak sekali tutorial yang membahas mengenai Breadcrumb pada Blogspot. Saya bisa mengkategorikannya menjadi dua macam cara. Taruhlah kita anggap ada Breadcrumb Simple Version dan Breadcrumb Completed Version. Mengapa oh mengapa saya membagi dan memberi namanya dengan seperti itu? Baca selanjutnya aja gan,, nanti juga tau og..

1. Breadcrumb Simple Version

Untuk cara pertama ini, sederhana, breadcrumb hanya akan muncul sewaktu berada di bagian postingan blog kamu yang menggunakan blogspot. Contoh sederhana, silahkan kunjungki TKPnya gan, di http://catatan-alghifari.blogspot.com/ Untuk membuatnya, saya mengambil tutorial dari mas Herdiansyah [baca sumber referensi gan].

Pertama, masuk ke account blogger agan, dan menuju ke halaman edit HTML. Jangan lupa untuk centang atau "Expand Widget Template". Lalu masukkan kode CSS dibawah ini :

.breadcrumbs { padding:15px 5px 5px 0; margin:0;font:normal 12px Arial; line-height:1.6em; border-bottom:3px double #ddd}

Kedua, cari kode HTML <b:if cond='data:post.title'> (jika agan bingung, cukup menekan tombol Ctrl + F  di keyboard komputer/laptop agan untuk mencari kode. Atau kasih saya cendol, hehehe).
Ketiga, agan harus menambahkan kode HTML breadcrumb untuk menjalankan fungsi navigasi. Masukkan kode dibawah ini tepat di atas kode di atas tadi :

<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> &#8250;
<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;'> &#8250; </b:if>
</b:loop> </b:if> &#8250; <data:post.title/> </div> </b:if> </b:if>

Kemudian, lihat hasilnya pada postingan di blogspot Anda. Salam sukses yaw...

2. Breadcrumb Completed Version

1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML. Jika agan lupa, ntar gak bisa diverified lho accountnya,, just kidding..
2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:

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

3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:

<b:include data='posts' name='breadcrumb'/>

4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT di ATAS/SEBELUM-nya : Oke gan? Lanjut...? Right??

    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- No breadcrumb on home page -->
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <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 == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    »Unlabelled
    </b:if>
    » <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>

5. Pastikan semua kode telah di-copy dan diletakkan dengan benar ya gan, lalu save.

note: karena banyaknya problem yang disampaikan ketika mengedit, perhatikan benar-benar instruksinya serta pahami istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contohnya gini gan:

<b:include data='top' name='status-message'/><data:adStart/>

Kita lihat di situ ada 2 tag bersisian, jika anda harus memasukkan tag/kode baru di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:

<b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/>

<data:adStart/>

Download Source Code-nya
Berhubung karena beberapa fungsi scrolling, copy n paste pada blog It's My Simple Blog ini saya matikan, maka Agan" tentunya tidak bisa mengcopy-paste source code-nya. So, saya kasih solusi untuk biar tetap bisa mengaplikasikan. Saya sudah buatkan versi txt-nya yang bisa agan download. Mohon maaf bila kurang berkenan. ^_^
Download Source Code Tutorial Lengkap Breadcrumb Blogspot
Okeh,, bilamana ada pertanyaan, silahkan langsung saja berkomentar dibawah postingan Tutorial Lengkap Breadcrumb Blogspot ini yaw... Makasih... ^_^

Sumber Referensi :

1. Wikipedia, Breadcrumb(navigation) [Lihat sumber].
2. Herdiansyah, Cara Memasang Breadcrumb [Lihat Sumber].
3. Ahmad Khoirul Azmee, Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot. [Lihat Sumbernya].

 NOTE : Saya mohon dukungannya untuk memberi komentar pada salah satu tulisan saya yang berjudul "Teknologi untuk menguatkan Jati Diri Bangsa". Mohon komentar, dan sundulannya gan..

Tutorial Lengkap Breadcrumb Blogspot 2011-09-07T00:27:00+07:00 Rating: 4.5 Diposkan Oleh: Pengagum Wanita