Minggu, 13 Januari 2013

cara mudah menambahkan breadcrumbs di blog

hai! kali ini saya bakal mengepost tentang breadcrumbs cara membuatnya sedikit susah sih! tapi itu sangat dianjurkan untuk mempercantik blog. saya pernah membuatnya namun pada saat hampir selesai ada kesalahan jadi terpaksa saya hapus! tapi saya akan membuatnya lagi pada saat blog ini rame. oke langsung saja!
1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.
2. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT dibawahnya:

<b:include data='posts' name='breadcrumb'/>

3. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di atasnya:

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}
  
4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut tepat diatasnya:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
5. Pastikan semua kode diatas dimasukkan dengan benar, dan kemudian save

Catatan : breadcrumb ini akam muncul pada halaman postingan, bukan di home page, dan pastikan setiap artikel Anda sudah diberi label.

Tidak ada komentar:

Posting Komentar

✿ bila ingin copas , izinlah terlebih dahulu kepada salah satu admin . jangan lupa cantumkan sumbernya ( ื▿ ืʃƪ)
✿ berhak mengomentari, mengkritik, memberi saran dsb . asalkan dengan bahasa yang sopan (˘⌣˘)
✿ di tunggu kunjungannya lagi . arigatou gozaimasu (: (ˆ⌣ˆ‎)ҧ