Membuat Breadcrumb Versi Terbaru Tanpa Error
Rabu, 13 April 2011
Digg0Delicious0 0 0
 |
| Membuat Breadcrumb |
Membuat Breadcrumb Terbaru 2011. Sahabat informasi maya hari ini kang salman akan membahas lagi trik membuat breadcrumb versi kucoba.com 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 dulu kang salman buat, 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 web kucoba.com 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/AVvXsEjq9ti_gLjFB_Oj8sy42vrgpfQA4Z9TdFR3GBp7qfTIZuGpZ296e5pcmeltVGmacfftOAgptXjeEgJbdqDIvHIJJBc6hL73PgwFeG2WuLslnB1aJH3gXfT7HZEp0A_jewjRCViaJenJD9k/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/AVvXsEjq9ti_gLjFB_Oj8sy42vrgpfQA4Z9TdFR3GBp7qfTIZuGpZ296e5pcmeltVGmacfftOAgptXjeEgJbdqDIvHIJJBc6hL73PgwFeG2WuLslnB1aJH3gXfT7HZEp0A_jewjRCViaJenJD9k/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 breadcrumbseperti situs ini, tambahkan saja kode berikut ini, dan pastekan tepat di atas ]]></b:skin> :
.breadcrumbs {Terakhir save..
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}
Sobat informasi maya, bagaimana mudah sekali bukan? Dengan memasang sitemap breadcrumb blog anda kini telihat lebih profesional dan selain itu kini lebih SEO friendly dengan mesin pencari dari pada sebelumnya.
