Cara Membuat Breadcrumb Terbaru 2011

Membuat Breadcrumb Terbaru 2011. Sobat David Blog hari ini Kiyai David akan membahas lagi trik membuat breadcrumb versi terbaru dan cara pemasangan breadcrumb ini sangat mudah sekali. Selain itu, breadcrumb ini tidak akan eror apabila dalam satu artikel memiliki katagori yang banyak, berbeda dengan versi yang jadul yang artikelnya entah berantah kemana, apabila memiliki katagori lebih dari satu, maka tampilannya akan eror, sedangkan di versi yang ini, eror tersebut tidak akan terjadi lagi contohnya bisa anda lihat di bawah ini:

Membuat Breadcrumb

Nah bagus bukan? berapa pun katagori dalam satu artikel selalu akan di pisahkan koma dan itu sangat bagus untuk SEO.

Kalau anda tertarik membuat breadcrumb seperti blog ini silakan ikuti tutorialnya di bawah ini :

1. Login Blogger » Pilih Rancangan » Klik Tab Edit HTML » Centang Kotak Expend Widget

2. Cari kode berikut mirip seperti: <div class='post hentry'>
atau ketikan hentry pada search (Tekan F3 untuk membuka search.

3. Copy kode berikut, dan simpan tepat di bawah kode <div class='post hentry'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvPsWoJsQQonL3JSYlsfbbw9fux4m2BbZdvyLagKrGaluCJvKe9BqmbtDTMhkNNhoViTqCG74Ru9_jj3asXuuG8gW7V3B3GTM9sW7nCvcgIw0KFLCejat-wlnZXCqMLlDN1Mhm0Pwyq8/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
»
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvPsWoJsQQonL3JSYlsfbbw9fux4m2BbZdvyLagKrGaluCJvKe9BqmbtDTMhkNNhoViTqCG74Ru9_jj3asXuuG8gW7V3B3GTM9sW7nCvcgIw0KFLCejat-wlnZXCqMLlDN1Mhm0Pwyq8/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
» Archives for <data:blog.pageName/>
</div>
</b:if>

Jika sudah selesai simpan template dan lihatlah hasilnya..

Jika ingin menggunakan kotak (border) dalam breadcrumb seperti situs ini, tambahkan saja kode berikut ini, dan pastekan tepat di atas ]]></b:skin> :

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

Lalu Simpan..

Nah bagaimana? sulit yang mana dengan Breadcrumb lama dengan yang ini? tentu yang ini kan! dari segi SEO menurut Kiyai David lebih baik breadcrumb versi baru ini.. Sampai jumpa posting selanjutnya.

Thanks to : Kang Salman

Lihat Juga:

05 Sep 2011