Bersenang-senanglah di Dunia Maya dan Dunia Nyata

Thursday, August 1, 2013

Cara Memasang Breadcrumb di Blogspot Versi 2

Pada Kesempatan kali ini saya akan membuat posting tentang Cara Memasang Breadcrumb di Blogspot Versi 2. Untuk anda yang gagal dengan cara versi satu anda bisa mencoba versi 2 ini, karena ini lebih mutakhir, tetapi yang versi 1 juga sama hanya saja tidak berjalan di blog ini (blog ini menggunakan versi 2 ini).
Setelah mendapat ini dari bloggerplugins.org, blog yang membahas tentang segala widget untuk blogger. Breadcrumb dalam bahasa indonesia berarti Tepung Rotu (ada-ada saja) atau jejak breadcrumb. Dan breadcrumb adalah bantuan untuk navigasi yang digunakan dalam user interface. jadi akan terlihat lebih user friendly dan juga seo friendly. Breadcrumb ini memberikan pengguna cara untuk berpindah lokasi mereka dalam halaman situs atau dokumen. Istilah ini berasal dari jejak tepung roti yang diprakarsai oleh Hansel dan Gretel dalam dongeng populer (ternyata ada sejarahnya juga loh).

Breadcrumb akan terlihat seperti Home » Label » Cara Memasang BreadCrumb di Blogspot
Berikut ini contoh screenshot dari breadcrumb:



Sekarang Anda tahu apa yang dinamakan breadcrumb, mari kita langsung ke caranya.

Berikut ini Cara Memasang Breadcrumb di Blogspot Versi 2:
1. Pergi Ke Template > Edit HTML
2. Sekarang di dalam template, cari kode dibawah ini
<b:include data='top' name='status-message'/>
Tambahkan kode dibawah ini tepat dibawahnya
<b:include data='posts' name='breadcrumb'/>
3. Kemudian Cari,
<b:includable id='main' var='top'>
Jika anda menemukan 2 kode tersebut, lalu cari yang keduanya. Dan tepat diatas kode tersebut tambahkan kode dibawah ini:
<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>
kode diatas, hanya menampilkan label terakhir yang terpasang pada posting. Jika anda mau menampilkan semua label, hapuslah 2 kode yang diwarnai merah.
4. Lalu cari kode 
]]></b:skin>
Tepat diatas kode tersebut, tambahkan CSS dibawah ini:
.breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:95%;line-height: 1.4em;border-bottom:3px double #e6e4e3;}

5. Save Template dan Selesai :), Mudah bukan?!

NOTE: Untuk mengeCEK sudah muncul/tidaknya klik disini Rich Snippet
Apabila breadcrumb belum atau tidak muncul-muncul selama lebih dari 1 minggung bisa anda gunakan cara Cara Memasang Breadcrumb di Blogspot Versi 1, klik disini.


ATTENTION!
Apabila ada permasalahan munculnya tulisan :
"The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements."
Saya mempunyai postingan yang membahas solusinya:

Didukung oleh Google
Sekian postingan Tentang Cara Memasang Breadcrumb di Blogspot Versi 2
Terima kasih,
Diaz



1 comment:

  1. ada perintah kaya gini gimana caranya mbenerin Ms

    The widget with id "Blog1" contains at least two b:includable elements with the same id: "breadcrumb". All b:includable elements should have a unique id for a given widget.

    ReplyDelete