Breadcrumb Navigation

Pada postingan pertama ini Saung Gadget (selanjutnya disinggkat SG) akan membahas tentang "Cara Membuat Breadcrumb Navigation". Apa itu Breadcrum navigation ?

Breadcrumb Navigation adalah navigasi halaman pada postingan atau artikel, biasanya terletak di atas postingan. Breadcrumb navigation ini akan membantu para pengunjung melihat history blog kita, tidak hanya itu widget ini juga penting sekali penggunaannya karena membantu mempermudah crawl mesin pencari, sehingga lebih SEO friendly.

Breadcrum navigation ini juga akan terlihat pada hasil pencarian yang dilakukan oleh search engine, biasanya terdapat pada blog yang memiliki pagerank 2 ke atas, tapi tidak menutup kemungkinan yang berpagerank 2 kebawahpun bisa terlihat.

Berikut cara membuat breadcrumb navigation pada panel blogger terbaru atau Blogger draft. Blogger draft ini hanya tersedia dalam bahasa inggris untuk saat ini, so butuh sedikit pemahaman, hhe :

1. Login ke Blogger dengan ID sobat

2. Pilih menu Template, terdapat pada menu di sebelah kiri bawah

3. Klik Backup / Restore kemudian klik Donwload full template, untuk jaga-jaga kalau terjadi kesalahan

4. Pilih Edit HTML yang ada pada kolom Live on Blog kemudian klik Proceed

5. Centang tanda Expand Widget Template untuk memunculkan kode html yang di hidden/disembunyikan

6. Masuk ke proses pemasangan kode. Cari kode ]]></b:skin> , untuk mempermudah pencarian gunakan tombol Ctrl + F pada keyboard sobat.

7. Copy kode dibawah ini, kemudian paste tepat di atas kode ]]></b:skin>

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

8. Selanjutnya cari kode berikut <div class='post hentry uncustomized-post-template'> dan paste kode dibawah ini tepat di bawah kode <div class='post hentry uncustomized-post-template'> tadi.

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

Catatan :  kode #187 berwarna Biru pada kode diatas adalah simbol dari karakter " , sobat bisa merubahnya dengan simbol lain seperti simbol > atau / atau simbol lainnya yang bisa sobat temukan dengan keyword "kode html ascii" . Akan tetapi saya merekomendasikan menggunakan kode > dari pada kode

9. Kemudian Save template dan klik Close.

Menu navigasi diblog sobat sudah terpasang. Selamat mencoba.