Sebelumnya saya pernah share tentang Cara Membuat Breadcrumb di Blog. Kali ini saya akan membahas masih menyangkut tentang breadcrumb atau bisa disebut juga navigasi label atau tag. Bedanya kalau yang terdahulu hanya kaluar ketika kita membuka artikel atau label blog,
kalau sekarang selain terbuka di blog juga akan tampil di mesin pencari atau google. Lihat gambar di atas yang di lingkari, klik untuk memperbesar.
Jika Anda tertarik menggunakannya supaya kalihatan lebih profesional dan lebih SEO, langsung ikuti saja tahapannya berikut ini:
Sebagai catatan: jika sebelumnya di blog Anda sudah dipasang breadcrumb, lebih baik di hapus.
1. Masuk ke Dashboard Blogger
2. Pilih blog > Template > Edit HTML
3. Centang Expand Widget Template
4. Lalu cari kode ]]></b:skin> (gunakan Ctrl+F)
5. Copas code di bawah ini tepat di atas kode ]]></b:skin> tadi
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
6. Selanjutnya cari kode <b:includable id='main' var='top'> lalu 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 == "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' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
8. Selanjutnya Simpan Template
9. Selesai
Silahkan baca juga yang lainnya:
Cara Membuat Text Berjalan di Browser
Cara Membuat Judul Postingan Rata Kiri, Tengah, Kanan atau Sama Rata
Cara Membuat Label Animasi - Tag Cumulus
Cara Membuat Related Post dengan Thumbnail
Cara Menghilangkan Attribution Blogger
Cara Merubah / Mengganti Kursor di Blog
Cara Membuat Arsip Blog dengan Scroll