,
Headlines News :
Home » , , » Trik Cara Membuat Breadcrumb di Blogspot

Trik Cara Membuat Breadcrumb di Blogspot

Written By Nanda Journey on Kamis, 06 September 2012 | 17.07


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.

    Giman mudah kan jangan lupa tinggalkan kesan pesan yaaa
Anda sedang membaca artikel tentang Trik Cara Membuat Breadcrumb di Blogspot dan anda bisa menemukan artikel Trik Cara Membuat Breadcrumb di Blogspot ini dengan url http://hy-hack.blogspot.com/2012/09/trik-cara-membuat-breadcrumb-di-blogspot.html,Dilarang menduplikat artikel ini Trik Cara Membuat Breadcrumb di Blogspot jika sangat bermanfaat hanya boleh sebagai artikel refrensi atau harus mengulas nya dengan bahasa / kalimat yang berbeda dan memberi link ini : Trik Cara Membuat Breadcrumb di Blogspot


Artikel Terkait:

Share this post :

+ komentar + 2 komentar

Poskan Komentar

Blog Dofolow , Tapi Tolong jangan nyepam dan ada kata kata yang tidak baik

 
Support : Abaut Us | Contact Us | Privacy Policy | Term of Use | Redaksi | Advertise | Lowongan Kerja | Forum | Tabloit | Mobile Version | Hy Hack Toolbar
Copyright © 2011. HY hack - All Rights Reserved Template Created by Heykhend
Published by Heykhend Corp. Developed by PT Heykhend Publik Media (HPM)