Cara Mudah Membuat Breadcrumb Blogspot

Breadcrumb, adalah salah satu navigasi yang cukup menarik menurut saya. Navigasi ini, umumnya ada di blog wordpress secara default, Jadi tanpa harus mengedit macam-macam, navigasi breadcrumb di wordpress pasti sudah ada, lalu bagaimana dengan blogspot? hmm.. bisa juga kok, dengan sedikit otak atik template kita bisa punya menu breadcrumb seperti wordpress :D

Inilah contoh breadcrumb itu :


Gak asing kan? sobat pasti pernah melihatnya.. nah, inilah cara membuatnya :

pertama login ke akun blogspot sobat kemudian pilih rancangan > Edit Html

kemudian centang Expand Template Widget, jika sobat masih mencoba, baiknya download dulu template sobat, untuk menghindari kerusakan pada template.

jika sudah cari kode

]]></b:skin>

paste kode ini diatasnya :

.breadcrumbs{
padding-bottom:3px;
font-size:100%;
line-height:1.6em;
border-bottom:4px double #444444;
}

kemudian cari lagi kode : <b:include data='top' name='status-message'/>

copy dan paste kode ini dibawahnya :

<b:include data='posts' name='breadcrumb'/>

selanjutnya cari lagi kode : <b:includable id='main' var='top'>

dan letakan kode ini di atas kode tersebut :

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

dan terakhir, simpan template dan breadcrumb di blogspot sobat sudah jadi :)

note : untuk mempermudah pencarian kode, sebaiknya gunakan fungsi find yaitu dengan menekan tombol ctrl + f , dan pastekan kode yang dicari kedalam kotak find.

Sumber