Breadcrumbs dan Cara Pasangnya di Blogger

Breadcrumbs, Rootline atau jejak breadcrumb adalah bantuan navigasi / menu navigasi yang digunakan dalam user interface. Hal ini memungkinkan pengguna untuk melacak lokasi dan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel. Memasang navigasi breadcrumbs pada blog/web sangat penting dan dianjurkan oleh Google (search engine) karena bisa membantu meningkatkan SEO dan SERP lebih baik lagi, yaitu dalam hal pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting.

Inilah yang akan jadi topik tutorial SEO proBlogiz kali ini, pengertian Breadcrumbs dan Cara Pasangnya di Blogger.

Istilah breadcrumbs ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dongeng populer.

Contoh navigasi breadcrumbs pada halaman blogger

Breadcrumbs biasanya muncul horizontal di bagian atas halaman web / blog, sering di bawah bar judul atau header. Breadcrumbs menyediakan link kembali ke halaman sebelumnya dari halaman yang sedang dibuka atau pada - struktur situs hirarkis halaman induk- yang sekarang. Breadcrumbs memberikan navigasi bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah simbol " (>)" sering berfungsi sebagai pemisah hirarki, atau juga menggunakan simbol-simbol seperti "»" atau bentuk desain simbol lainnya

Type breadcrumbs umumnya mempunyai urutan seperti ini : 

Home page > Section page > Subsection page  

atau 

Home > Parental Category > Subcategory > Posting

Path (History) : path breadcrumbs yang dinamis untuk menunjukkan jalan bagi pengguna untuk tiba di suatu halaman.

Lokasi: lokasi breadcrumbs yang statis dan menunjukkan di mana halaman tersebut terletak pada hirarkis situs  .

Atribut: atribut breadcrumbs memberikan informasi yang mengkategorikan suatu halaman.

Pada Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage

Cara Memasang/membuat Navigasi Breadcrumbs di Blogger/Blogspot

Untuk memasang breadcumbs atau menu navigasi breadcumbs di blogger, ikuti langkah-langkah berikut :

Langkah Pertama

• Masuk ke dashboard Blogger > Template > Edit HTML
• centang (check) "Expand Widget Templates"
• gunakan Ctrl+F untuk pencarian

Langkah Kedua

Cari tag ]]></b:skin> dan letakkan kode CSS berikut di ATAS-nya:

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

Langkah Ketiga

Cari tag <b:includable id='main' var='top'> lalu ganti dengan script berikut :

<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'/>

Pastikan semua kode diatas di-copy dan diletakkan dengan benar, kemudian Save Template

Breadcrumb Navigasi merupakan salah satu bagian dari SEO dan Google sangat merekomendasikan untuk memasang breadcrumb tersebut dan termasuk SEO on page. Dengan dilengkapi navigasi breadcumbs pada blog / web Anda akan mempermudah pengunjung untuk melacak artikel-artikel blog dan menjadi lebih SEO Friendly.

Sudahkah Anda menerapkannya sob?..

Thanks semoga tutorial Breadcrumbs dan Cara Pasangnya di Blogger....silahkan beri komentar jika ada yang ditanyakan sob