Membuat Breadcrumb Blogger Yang Valid

Bagi Anda para blogger mania, tentunya sudah tidak asing lagi dengan yang dimaksud dengan breadcrumb bukan? Breadcrumb merupakan salah satu bentuk dari navigasi sebuah laman web atau blog yang sedang kita lihat. Breadcrumb dibuat dengan tujuan untuk memudahkan para visitor dalam menjelajahi laman suatu web atau blog. Selain dapat mempermudah para visitor blog, breadcrumb juga merupakan salah satu faktor yang mendukung optimasi mesin pencari seperti yang dijelaskan pada search engine optimization starter guide yang dapat diuduh di laman web master google.



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 :

1. Buka Blogger. Masuk ke tab menu Rancangan -> Edit HTML
2. Checklist 'Expand Widget Templates'.
3. 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;
    }

4. Langkah selanjutnya cari kode <b:include data='top' name='status-message'/> dan letakkan kode berikut: <b:include data='posts' name='breadcrumb'/> tepat diatasnya.

5. Cari kode .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>

Sebagai demo dari membuat breadcrumb blogger yang valid bisa Anda lihat pada template-template blogger yang telah IdBlogDesign bagikan secara gratis antara lain : Ultimate Store, AzonMiniSite dan One Piece. Template-template tersebut sudah dilengkapi dengan breadcrumb yang valid menurut Search Rich Snippets Testing Tool dari Google Web master.