Monday, August 15, 2011

Trik Cara Membuat Breadcrumb di Blogspot




















Cara Membuat Breadcrumb

Pastinya sudah banyak yang tau kan apa itu breadcrumb
? Ya breadcrumb adalah menu navigasi
yang biasanya terdapat diatas postingan. Tujuannya adalah untuk menunjukkan
urutan isi halaman dari Home sampai ke posting artikel yang sedang dibaca.
Kalau kita menilik asal muasalnya, menu
navigasi breadcrumb
ini berasal dari platform Wordpress yang secara default sudah disetting
otomatis urutan navigasinya mulai dari Home > Parent Category (kategori
utama) > Subcategory > Posting. Sedangkan untuk platform blogger, karena
belum ada setting otomatisnya maka kita perlu melakukan sedikit trik cara membuat breadcrumb di blogspot ini. Menu navigasi breadcrumb di blogspot ini kita
buat berdasarkan urutan Home > Label > Posting.  Sama seperti di WP, breadcrumb di blogspot tidak akan terlihat pada halaman Homepage,
tetapi dapat terlihat pada halaman posting, label dan juga arsip.





Trik Cara Membuat Breadcrumb di Blogspot adalah
sebagai berikut :


  • Login ke dashboard blogger anda, pilih Rancangan
    > Edit HTML, centang Expand widget template.



  • Cari kode ini









    ]]></b:skin>
    pada template anda. Copy kode CSS dibawah ini dan paste-kan kode CSS tepat
    diatas 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;}


  • Lanjutkan dengan mencari kode ini









    <b:include data='top'
    name='status-message'/>
      pada template anda. Letakkan kode dibawah
    ini dibawahnya.





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


  • Kemudian cari lagi kode 









    <b:includable id='main'
    var='top'>
    . Copy script dibawah ini dan letakkan tepat
    diatas kode tadi.





<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>


  • Cek sekali lagi apakah anda sudah meletakkan
    kode CSS/script yang diberikan pada tempat yang dimaksud pada langkah 2-4
    diatas. Sebaiknya download dulu template anda sebelum dimodifikasi.



  • Jika sudah yakin semua langkah diatas sudah
    dilakukan dengan benar, Save template anda.




No comments:

Post a Comment