Cara membuat breadcrumbs di blog

Breadcrumb-navigation, breadcrumb-navigation dlh navigasi yang biasanya dipasang oleh sebuah website termasuk blog untuk mempermudah search engine menemukan artikel-artikel kita, oleh sebab itu breadcrumb-navigation bisa membuat template kita lebih seo friendly. Tampilan breadcrumb-navigation pada blog akan terlihat seperti gambar dibawah ini.

Pada gambar letak breadcrumb-navigation adalah yang di kurung menggunakan garis kotak berwarna merah...

Oke kalau begitu sudah yaw basa-basinya, bagi yang mau memasang berikut ini cara pasangnya:

1.login dulu ke blogger(dot)com

2. masuk ke Klik Tata Letak, Pilih tab Edit HTML, Click Download Full Template and

please back up your template first (utuk jaga-jaga kalau terjadi kegagalan), Kemudian beri tanda centang

pada kotak kecil di samping

tulisan Expand Template Widget.

3. cari kode ]]></b:skin> (gunakan ctrl + F untuk mencari cara cepat), kalau sudah copi kode part1 berikut ini:

/* breadcrumbs part1 by fayescool */

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

#e6e4e3;}

4. pastekan kode part1 diatas kode ]]></b:skin>

5. cari kode <div class='post hentry uncustomized-post-template'> dan kopi kode part2 berikut ini:

<!-- breadcrumbs part2 by fayescool -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
<!-- breadcrumbs part2 end -->

7. kopikan kode part2 dibawah kode <div class='post hentry uncustomized-post-template'> 

8. simpan template

9. coba cek, sadarkah anda kalau no.6 nya gak ada? hi hi hi

Oke kalau begitu tank pyu udah mampir, semoga berguna....

Posted by Fayes Cool » Rating 4.5 » at Tuesday, July 19, 2011

Postingan Terkait

Blog tip N trik

• Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
• Trik membuat tulisan berjalan (marquee)
• CONVERT CODE HTML, JAVASCRIPT, CSS, DAN SEJENISNYA
• Cara Memasang Link Pada sebuah Gambar
• Membuat Spoiler (tombol Buka Tutup)
• Pengeditan Template Blogger Tampilan Baru Kurang Maksimal?
• Cara membuat Spoiler Di Komentar Blogspot
• Membuat spoiler di komentar treaded/bertingkat Blogspot
• Membuat spoiler di komentar Blogspot Non Treaded
• Ngerjain Autoblog Rssforward.com offpage
• Ngerjain Autoblog Yang Menforward Feed Kita
• Cara pasang Widget statistik Histats
• Review Komentar untuk Menambah Ide Postingan
• Test kecepatan web (GOOGLE PAGE SPEED ONLINE)
• Anti klik kanan mouse dan Keyboard tanpa script yang panjang
• Pasang widget follower/pengikut asli dan modifikasi sesuka hati
• Anti adblock 2.00 lindungi situs anda dari adblock
• Pasang tombol google +1 di wordpress dan blogspot
• Cara membuat link bergoyang dombret
• Membuat Sumber Otomatis bila ada yang kopas