Cara Membuat Breadcrumb Blogger

Dalam penggunaannya, mayoritas website yang berplatform self hosted umumnya sudah menggunakan apa itu yang namanya breadcrumb. Breadcrumb biasanya terletak pada bagian atas dari suatu postingan. Nah, bagaimanakah cara membuat Breadcrumb yang valid dalam mesin Blogger.com??? Berikut tutorial membuat breadcrumb blogspot.

1. Login ke akun Blogger, Pilih Rancangan. Kemudian Edit HTML.
2. Jangan lupa untuk mencentang "Expand Template Widgets".
3. Letakkan kode berikut ini diatas kode "]]></b:skin>".
   

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

Breadcrumb yang akan Anda buat, nantinya akan nampak sebagaimana dalam blog ini yang bisa Anda jumpai pada atas postingan ini. Oh iya, berikut ini merupakan kelebihan dari breadcrumb versi ini:

• Design menawan, hehehe
• valid menurut Search Rich Snippets Testing Tool dari Google Web master 

Pengertian Breadcrumb

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. (silahkan diartikan tersendiri)

Screenshot Breadcrumb

Demikianlah postingan mengenai cara atau tutorial membuat breadcrumb pada blogger atau blogspot. Semoga menjadi bermanfaat... :)