Cara Membuat Breadcrumbs Di Blogger

Breadcrumbs itu apa ya? kayak nama sejenis roti. Bukan gan breadcrumbs itu adalah navigasi tambahan aja buat di situs atau di blog untuk ngasi tau ke pengunjung kalo mereka sedang berada di halaman mana dari sebuah blog tersebut.

Apa sih keuntungan membuat breadcrumbs? Gak banyak sih gan paling cuma buat ngemudahin pengunjung biar tau lagi ada di halaman mana dan di kategori apa. Breadcrumbs ini cocok di pasang di situs atau blog yang menjual produk dan dengan banyak kategori gan. Misal contoh situs Amazon, Ebay dll.

Lalu kalo dipasang di blog biasa bagus gak buat SEO? Banyak orang yang bilang bagus tapi menurut gw gak bagus gan. Gw jelasin sedikit kenapa gak bagus buat SEO karena breadcrumbs itu bakal ganti permalink blog loe yang ada kata kuncinya sama kategori di hasil pencarian Google.

Jadi yang di index sama Google bukan kata kunci loe tapi kategorinya ini gak bagus buat rangking blog di hasil pencarian Google gan. Contohnya kayak gambar dibawah ini gan.

Tapi buat loe yang tetep pengen membuat breadcrumbs di blog gw cuma saranin nambahin rel=noindex gan biar permalink blog loe tetep yang keluar di hasil pencarian Google. Oke langsung aja disimak cara buat breadcrumbs nya gan.

Note : Inget selalu download atau backup template sebelum edit HTML buat menghindari hal-hal yang gak di inginkan.

 Cek ini gan >>> Edit Template Blogger Versi Baru

Cara Membuat Breadcrumbs Di Blog

• Pertama masuk ke Blogger lalu cari Template dan klik Edit HTML terus centang Expand Widget Templates gan. Lalu teken Ctrl + F di keyboard dan cari kode <b:include data='top' name='status-message'/> kalo udah ketemu tambahin kode ini <b:include data='posts' name='breadcrumb'/> di atasnya gan.

• Lanjut cari kode ini <b:includable id='main' var='top'> gan. Kalo udah ketemu pastein kode dibawah ini di atasnya gan.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

• Tinggal di preview aja kalo gak ada masalah langsung di Save template gan. Coba buka blog loe pasti udah ada breadcrumbsnya gan.

Kalo tulisanya gak cocok atau mungkin keluar dari area blog loe bisa tambahin kode css dibawah ini di atas kode ]]></b:skin> gan. Tinggal di edit aja sesuai selera loe gan.

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

Sekian dulu yang bisa gw share tentang cara membuat breadcrumbs di blog semoga bermanfaat. Kalo buat di Wordpress gampang tinggal pake plugin gan. Jangan lupa buat ninggalin komentar gan.