Cara Memasang Breadcrumbs Di Blog

Cara Memasang Breadcrumbs di Blog - Breadcrumb merupakan suatu navigasi yang biasanya berada di atas postingan blog, dan berupa kategori atau label postingan tersebut yang mana diawali dengan link ke halaman utama atau home. 

(Baca Juga : 9 Manfaat Update Artikel Blog Rutin bagi Website)

Cara Memasang Breadcrumbs di Blog

Breadcrumb dapat membantu Google bot untuk lebih cepat mengenali struktur dalam blog. Breadcrumb memiliki struktur seperti Home Page Blog -> Kategori atau Label -> Judul Postingan

Fungsi dan Manfaat Memasang Breadcrumb di Blog

1. Membantu Googlebot lebih cepat mengenali struktur pada blog yang dipasangi breadcrumb tersebut.
2. Memudahkan pengunjung untuk mencari artikel dengan kategori serupa.
3. Membuat pengunjung mengetahui dimana posisi mereka saat sedang membaca suatu artikel.
4. Membuat blog menjadi lebih SEO Friendly.

Untuk menambahkan breadcrumb di blog tidaklah sulit, hanya dengan menambahkan beberapa kode pada blog mu.

(Baca Juga : Cara Memasang Widget Burung Twitter Terbang di Blog)

Cara Memasang Breadcrumb di Blog

• Login ke akun blogger mu,
• Silahkan menuju menu Template / Tema, lalu klik tombol Edit HTML,

• Cari kode <b:skin>...</b:skin>, klik titik-titik ditengahnya, lalu cari kode ]]></b:skin>, gunakan fitur search box untuk memudahkan dalam mencari dengan menekan tombol F3 atau CTRL F,

• Lalu letakkan kode dibawah ini tepat diatas kode tadi

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

• Setelah itu cari kode <b:includable id='main' var='top'>. Jika kamu menemukan kode ini lebih dari 4, silahkan coba satu-satu, lihat tahap selanjutnya.
• Ganti kode diatas dengan kode dibawah ini. 

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/> 

• Simpan Template, lalu cek blogmu. Breadcrumb sudah terpasang. 
• Selesai

Semoga tutorial Cara Memasang Breadcrumb di Blog bermanfaat.