Cara Memasang Breadcrumbs di Blogger

Cara Memasang Breadcrumbs di Blogger - Apa itu Breadcrumb di blog?  Breadcrumb adalah sebuah menu navigasi pada blog untuk mempermudah pengunjung mengetahui informasi tentang keberadaannya (posisi pengunjung ketika membaca salah satu konten) di dalam suatu blog dan bisa kembali lagi ke awal (homepage) dengan cepat.

Menurut wikipedia, Breadcrumb biasanya muncul secara horizontal di bagian atas sebuah halaman web atau blog, biasanya terletak di bawah bar judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk (hompage) dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (›) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti » atau ›), serta beragam grafik.

Untuk contohnya anda bisa melihat breadcrumb di blog ini, seperti gambar berikut.

Breadcrumbs

Apa manfaat dan fungsi Breadcrumb di Blog?  Breadcrumb dapat memberikan kemudahan bagi pengunjung blog dalam hal navigasi, sehingga pengunjung bisa mengetahui posisinya di dalam blog ketika membaca salah satu konten di blog dan kembali dengan cepat ke halaman awal (homepage). Selain itu, dalam hal SEO breadcrumb dapat memperkaya kata kunci yang berada di dalam postingan blog. Dan menurut para master blogger, breadcrumbs juga dapat membuat postingan atau konten yang baru di publikasikan lebih cepat terindex oleh search engine. Tampilannya pun sangat berbeda ketika judul postingan anda muncul di hasil pencarian, seperti gambar berikut.

Bagaimana sobat, memasang breadcrumb ini sangat bermanfaat bukan? Yuk kita langsung ke langkah-langkah penerapannya.

Cara Memasang Breadcrumbs SEO Friendly di Blogger.

1. Pertama-tama login ke akun blogger anda. Pada dashboard, pilih menu Tema atau Template, klik Edit HTML. Lalu cari kode ]]></b:skin> (gunakan Ctrl+F untuk mempermudah pencarian)

2. Tambahkan kode CSS di bawah ini sebelum atau di atas kode ]]></b:skin>

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

3. Selanjutnya cari kode HTML post seperti berikut.

<b:includable id='main' var='top'>

4. Kemudian tambahkan kode HTML Breadcrumbs tepat di bawah kode HTML di atas.

<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='https://schema.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'/>

5. Klik Simpan Template atau Tema.

Untuk mengetahui breadcrumbs sudah terpasang dengan benar di blog, silahkan anda buka salah satu artikel atau konten blog anda.
Dengan memasang breadcrumbs di blog, selain meningkatkan SEO blog di mata search engine, breadcrumbs juga bisa membuat blog lebih mudah di telusuri pengunjung dalam hal navigasi serta blog lebih terlihat profesional.

Demikian tutorial sederhana tentang bagaimana cara memasang breadcrumbs di blogger. Semoga bermanfaat. "Happy Blogging"

Related Posts :

• Membuat Blog Menjadi Responsive Mobile Friendly
• Cara Menambahkan Video pada Postingan Blog
• Membuat dan Memasang Contact Form Bawaan Blogger Pada Halaman Statis
• Menyembunyikan dan Menampilkan Widget Pada Halaman Tertentu di Blogger
• Cara Mengatasi Error Breadcrumb di Google Search Console
• Cara Membuat Web Push Notifications di Blogger
• Cara Backup dan Import Seluruh Data Artikel Blog
• Membuat Widget Pengikut Blog dengan Kode HTML
• Cara Mengganti Profil Google+ ke Profil Blogger Terkait Penghentian Google+
• Membuat Menu Navigasi Plus Kotak Pencarian Responsive

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG