Friday, February 22, 2013
Cara Membuat Breadcrumb Navigation di Blog – Apakah
anda ingin mempunyai blog yang SEO Friendly dan disukai Google ? Pastinya
bukan, memiliki blog yang seo friendly pada saat ini sepertinya sudah menjadi
trend dan keharusan agar blog yang kita optimasi tidak sia- sia dan bisa masuk
halaman pertama pada Mesin pencarian Google. Salah satu cara agar blog itu SEO
Friendly adalah dengan di pasangnya Breadcrumb Navigation pada blog kita.
Sebelum membahas cara membuat Breadcrumb Navigation
pada blog sebaiknya saya menjelaskan terlebih dahulu apa dan fungsi breadcrumb
tersebut, agar anda semakin mantab / yakin untuk memasangnya pada blog anda.
Breadcrumb atau remah roti adalah istilah
yang sering digunakan oleh orang barat untuk hal-hal yang membantu mereka
menelusuri posisi mereka dari suatu titik awal. Fungsi breadcrumb adalah untuk memudahkan Googlebot
mengenali struktur blog kita lebih cepat, karena
halaman-halaman yang berada pada hirarki atas akan mendapat lebih banyak aliran
poin dibandingkan halaman-halaman yang lebih di bawah hirarki. Urutan navigasi
breadcrumb pada blog blogspot di mulai dari Home > Label > Posting
berbeda dengan wordpress yang memiliki urutan navigasi dari Home > Parental
Category > Subcategory > Posting.
Diatas sudah sedikit saya jelaskan
apa dan fungsi breadcrumb itu, sekarang waktunya saya memberikan tutorial cara
membuat breadcrumb navigation pada blog, silahkan ikuti langkah- langkah di
bawah ini.
Cara Membuat Breadcrumb Navigation di Blog
1. Masuk ke dashboard > Design/Rancangan > Edit
HTML, jangan lupa centang (check) "Expand
Widget Templates" di pojok kanan atas kotak edit HTML.
2. Cari (gunakan
Ctrl+F) ]]></b:skin> lalu
masukan kode dibawah ini tepat diatasnya:
.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}
3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian
tambahkan kode ini TEPAT di BAWAH-nya:
<b:include data='posts' name='breadcrumb'/>
4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script
berikut TEPAT di ATAS-nya:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><!-- No breadcrumb on home page --><b:else/><b:if cond='data:blog.pageType == "item"'><!-- breadcrumb for the post page --><p class='breadcrumbs'><span class='post-labels'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'> »<a expr:href='data:label.url' rel='tag'><data:label.name/></a></b:if></b:loop><b:else/>»Unlabelled</b:if>» <span><data:post.title/></span></b:loop></span></p><b:else/><b:if cond='data:blog.pageType == "archive"'><!-- breadcrumb for the label archive page and search pages.. --><p class='breadcrumbs'><span class='post-labels'><a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/></span></p><b:else/><b:if cond='data:blog.pageType == "index"'><p class='breadcrumbs'><span class='post-labels'><b:if cond='data:blog.pageName == ""'><a expr:href='data:blog.homepageUrl'>Home</a> » All posts<b:else/><a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/></b:if></span></p></b:if></b:if></b:if></b:if></b:includable>
5. Pastikan semua kode telah di-copy
dan diletakkan dengan benar, lalu save.
setelah men-save template anda,
sekarang cek apakah blog anda sudah memiliki breadcrumb pada halaman artikel. Membuatnavigasi breadcrumb ini adalah salah satu cara untuk men-seo kan template anda,
masih ada tutorial- tutorial lainnya yang harus anda ketahui, Jadi terus tunggu
artikel terbaru pada blog ini ya.. Happy Blogging!