Cara Membuat Navigasi Breadcrumb

Waduh-waduh.....
maaf ya sodara sodari.....

Aku udah 2 hari nih gak posting, pasti membuat para pengunjung yang setia atau kesasar kesini khawatir ya.........

hehehe, oke-oke sekarang kita mulai lagi nih dengan tutorial yang pastinya udah pada ditunggu ya kan??

Tutorial kali ini adalah membuat breadcrumb.Nah apa lagi tuh breadcrumb??dijelasin dikit deh.
Breadcrumb atau navigasi breadcrumb itu adalah sebuah navigasi yang memberitahukan dimana si pengunjung berada.Kayak di postingan ini loh, kan ada diatasnya.Ini juga membuat Mbah Google makin sayang sama blog kita.Pengen??Tertarik??Mau nyoba??Pantengin deh postingan ini terus.

Awalnya sih aku nemuin artikelnya pake bahasa inggris, tapi buat yang enggak ngerti aku postingin lagi biar lebih gampang.

  • Harus Login ke Blogger pake ID sendiri
  • Masuk ke Layout-->Edit HTML
  • Kalo mau di download klik dulu Download Full Template
  • Centangin dulu dong Expand Templates Widget nya.
  • Cari kode ini ]]></b:skin>
  • Kopi kode dibawah ini diatasnya kode ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Jangan harap udah selesai gini aja.Masih ada lagi nih yang perlu ditambahin.

  • Cari kode ini <div class='post hentry uncustomized-post-template'>
  • Kopi kode dibawah ini trus paste dibawah kode <div class='post hentry uncustomized-post-template'>
<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>
  • Abis tu tinggal di save dan blogmu resmi mempunyai breadcrumb.
Selamat Mencoba, Semoga Bermanfaat, dan Semoga Berhasil prakteknya.

u comment i follow
Bookmark and Share
Dapatkan Artikel terbaru dari blog ini, langsung ke e-mail anda dengan berlangganan disini.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Sudah Baca Yang Ini ?



Comments :

5 comments to “Cara Membuat Navigasi Breadcrumb”

Rizky2009 mengatakan...
on 

contoh hasilnya ky gmn sob breadcrumb itu?

Ocim mengatakan...
on 

mantap sob hasilnya, ntar deh saya coba

Rahad GoKill mengatakan...
on 

@rizky2009>itu loh yg ada browse>>home>>tutorial blogspot>>cara membuat navigasi breadcrumb

@ocim>silakan dicoba.....selamat mencoba ya...

Rizky2009 mengatakan...
on 

sob kode ini g ada d template q

<div class='post hentry uncustomized-post-template'>

Rahad 2 Six mengatakan...
on 

Rizky2009 > coba aja di kotak pencarian,hapus dari belakang dikit2..kemungkinan besar ketemu kode yg mirip

Posting Komentar

Blog ini DoFollow.
Jadi silahkan berkomentar disini.

Yang penting komentar bukan Spam,Porno,maupuun berunsur SARA.Jika ada yang seperti itu akan langsung dihapus.


Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Friends

 

Copyright © 2009 by Rahad 2 Six