Biasanya kita lebih sering menjumpai breadcrumb pada web-web ternama atau pada blog yang menggunakan software atau layanan dari wordpress. Bagi kita yang menggunakan fasilitas blogger atau blogspot, fitur breadcrumb saat ini belum disediakan oleh pihak blogger. Namun sebagai alternatifnya kita bisa membuat breadcrumb sendiri yang valid menurut Search Rich Snippets Testing Tool dari Google Web master pada blog kesayangan kita yaitu dengan langkah sebagai berikut ini :
- Buka Blogger. Masuk ke tab menu Rancangan -> Edit HTML.
- Checklist 'Expand Widget Templates'.
- Cari kode ]]></b:skin> dan letakkan kode css berikut diatasnya atau Anda dapat memodifikasinya sendiri nantinya.
.breadcrumb { padding:5px 5px 5px 0px; margin: 0 0 10px; font-size:90%; line-height: 1.3em; border-bottom:3px double #ccc; }
- Langkah selanjutnya cari kode <b:include data='top' name='status-message'/> dan letakkan kode berikut: <b:include data='posts' name='breadcrumb'/> tepat diatasnya.
- Cari kode <b:includable id='main' var='top'> . Mungkin Anda akan menjumpai beberapa kode yang sama persis, namun pilih salah satu saja pada kode urutan yang kedua dari atas, setelah ketemu letakkan kode berikut ini tepat diatasnya.
<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>
halo mas bro.. apakah pada template CSS3 sudah di kasih kode kode ini? makasih templatenya.. ringan banget.
BalasHapushehe...sudah mas bro. yub sama-sama mas bro, mohon maaf kalau masih banyak kekurangan template buatan nubie. :)
Hapus