Cara Memasang Breadcrumbs Di Blog Blogspot

Yosh,,artikel kali ini akan membahas Cara Memasang Menu/Navigasi Breadcrumbs Di Blog Blogspot. Sebelumnya saya ucapkan Assalamualaikum sobat semuanya...semoga dalam keadaan sehat. Apa sobat udah tau Apa itu breadcrumbs ???

http://remajasampit.blogspot.com/
Breadcrumbs adalah Navigasi untuk menunjukan urutan mulai dari Link Blog, Labe, Dan judul posting, breadcrums terletak pada bagian paling atas posting, mungkin ada yang di bawah posting. Tapi sampai saat ini saya belom pernah liat yang di bawah,,hehehe. Trus Apa manfaat Memasang Breadcrumbs di Blog ???

http://remajasampit.blogspot.com/

Manfaat memasang breadcrumbs adalah:
1. Memadatkan kata kunci pada posting
2. Memberi Navigasi Posting sesuai labelnya
3. Membuat Blog lebih SEO
4. Katanya Google suka kalo ada breadcrumbsnya
5. Untuk variasi juga.
http://remajasampit.blogspot.com/

Contoh Breadcrumbs

Lantas bagaimana cara memasangnya ???
Langkah pertama dan yang paling utama, karena jika langkah ini tidak dijalankan breadcrumbs tidak akan berhasil terpasang, langkah pertama yaitu Login dulu ke Blog sobat,,hehehe. Blognya yang Blogspot ya..kalo udah login gk usah login lagi ya... Pilih Template, Pilih Edit Html, dan Centang Pada Expand Template Widget

Langkah kedua tekan ctrl+f agar memudahkan sobat melakukan pencarian kode. Cari kode ]]></b:skin>, letakan kode berikut tepat Diatasnya

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

Langkah ketiga. Cari kode <b:include data='top' name='status-message'/>, dan letakan kode dibawah ini tepat Dibawah atau Setelahnya .Jika di template sobat terdapat 2 kode tersebut, letakan pada kode yang ke-2

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

Langkah Terakhir. Cari kode <b:includable id='main' var='top'> ,dan letakan kode dibawah ini tepat Diatasnya atau Sebelumnya.

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

Save dan Selesai. Pastikan semua kode terpasang pada posisi yang benar. Dan lihat perubahannya.
Sekian catatan kecil dari saya mengenai  Cara Memasang Breadcrumbs Di Blog Blogspot