Cara membuat menu Navigasi Breadcrumbs di blog

Bagaimana Cara membuat menu Navigasi Breadcrumbs blog? Navigasi Breadcrumbs membawa efek positif bagi SEO. Fungsinya agar Googlebot dapat dengan mudah dan lebih cepat mengenali struktur blog Anda dan membantu pengunjung untuk betah di blog anda. Apa itu Navigasi Breadcrumbs? Navigasi Breadcrumbs adalah salah satu menu yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari HOME>>>Category(labels)>>>Sub category(judul postingan). Pembuatan navigasi breadcrumbs berguna juga buat optimasi SEO yaitu membantu memberi kepadatan keyword dan pemetaan pada search engine terutama Google Search. Lihat contoh navigasi breadcrumbs dibawah ini:

Untuk membuat Navigasi Breadcrumbs Blog, Anda bisa mengikuti prosedur berikut ini:

1. Login dulu ke akun blogger anda, klik Template --->Edit HTML--->Centang expand widget

2. Cari Kode ]]></b:skin> untuk memudahkan pencarian silahkan tekan CTRL Fdan masukkan code yang anda cari. Kalau sudah ketemu silahkan anda copy paste kode dibawah ini tepat diatas kode ]]></b:skin>.

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

3. Cari lagi kode ini : <b:includable id='main' var='top'>
  Hapus dan ganti 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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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'/>

3. Simpan dan lihat hasilnya. SELAMAT MENCOBA 


Terimakasih  telah membaca Artikel "Cara Membuat Menu Navigasi BreadCrumbs Blog" Semoga Informasinya dapat membantu dan bermanfaat.