Cara Membuat Breadcrumb di Blogger

Untuk menjadikan blog lebih disukai google, para master seo manganjurkan untuk membuat breadcrumb pada blog. Cara Membuat Breadcrumb di Blogger tidaklah sulit dan sebenarnya jika kita perhatikan navigasi ini sering kita temukan juga di blog wordpress dimana menu navigasinya dimulai dari home/branda, kemudian diikuti oleh labe dan sublabel dan yang terakhir diikuti oleh judul postingan.

Blog yang memiliki breadcrumb konon memiliki daya SERP yang lebih tinggi di Google dibanding yang tidak memakai breadcrumbs. Tentu saja, itu cuma salah satu faktor. Bagaimanapun, konten artikel yang orisinil, loading cepat dan ringan, plus template yang ramah Google (friendly) serta internal link yang baik adalah empat faktor yang sangat signifikan di mata Google.

membuat breadcrumb di blogger ini sangat mudah, karena hanya di butuhkan sedikit modifikasi saja. karena sangat mudahnya saya rasa mungkin ini akan menjadi tutorial yang singkat. Namun agar Anda tidak bingung sedikit saya akan menjelaskan apa itu breadcrumb ?. Breadcrumb atau breadcrumb trail adalah bantuan navigasi yang dipakai untuk mengetahui jejak asal dari lokasi dalam sebuah bog/website, program atau dokumen, perhatikan gambar dibawah ini :

cara membuat breadcrumb, membuat breadcrumb, breadcrumb, breadcrumb trail


Nah, sekarang bagaimana, sudah jelaskan ? Untuk membuat breadcrumb silahkan Anda perhatikan langkah-langkah dibawah ini :


1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.
2. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT dibawahnya:
 
<b:include data='posts' name='breadcrumb'/>

3. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di atasnya:

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

4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut tepat diatasnya:

<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 diatas dimasukkan dengan benar, dan kemudian save

Catatan : breadcrumb ini akam muncul pada halaman postingan, bukan di home page,

Post a Comment

W a r n i n g !
Komentar anda tidak boleh mengandung unsur:
- Penghinaan atau Pelecehan.
- Spamming (Spam Comment).
- Link Aktif atau Anchor Text, dan sejenisnya.

Komentar akan muncul setelah di setujui.
Tulislah setiap kata dengan penuh kesopanan.

Terima kasih untuk kunjungannya.