Membuat navigasi breadcrumb versi 2

Trik blogging - Sebagai kelanjutan dari posting sebelumnya yaitu  membuat navigasi breadcrumb versi 1,  kali ini ane akan share versi ke 2 nya.

Sebelum kita mulai, pernahkah sobat mengalami hal ini?

1. Template eror ketika memasang breadcrumb
2. Template tidak eror tapi breadcrumbnya tidak muncul.

Oke! mari kita lanjut.
Dalam memasang breadcrumb, poin yang pertama umumnya sangat jarang terjadi, penyebabnya hanyalah salah meletakkan kode atau tidak menuliskan kode secara lengkap ( terutama tag pembuka dan penutup  )
Poin yang kedua, umumnya terjadi pada blog dengan template MINIMA /modifikasi minima. Mengapa?
saya sendiri juga tidak tahu.. maklum, ane masih belajar. hehehe

Bagi anda pecinta template minima yang ingin buat breadcrumb navigasi akan ane kasi tutorialnya. karna itu tanpa berlambat waktu kita langsung saja.. Oke!!

1. Pertama log in dulu ke akun blog sobat.
2. Klik rancangan --> edit html --> centang kotak expand template widget.
3. Klik download template lengkap untuk mencegah terjadinya eror pada template.
4. Letakkan kode berikut di atas kode ]]></b:skin>.
.breadcrumbs {
padding:10px;
margin: 10px;
border:1px solid #000000;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
5. Cari kode  <b:includable id='post' var='post'> ( Gunakan Ctrl + F untuk memudahkan pencarian )
6. Letakkan kode berikut tepat di BAWAHNYA.
<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>
7. Dan yang terakhir simpan template.


Semoga bermanfaat.

Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

Christian angkouw Sobat sedang membaca artikel tentang Membuat navigasi breadcrumb versi 2. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

3 comments

:E: kok gak ketemu dan kode yang kedua???? :L:

Bisa gak tulisan breadcumb nya dibikin pakai border gitu gan? THANKS :)

Kebetulan saya sudah pakai nih breadcumb kyk tutorial di atas.

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.