Senin, 31 Oktober 2011

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.


Berkomentarlah dengan sopan dan tidak menggunakan Link aktif. EmoticonEmoticon

Diberdayakan oleh Blogger.