Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

31 komentar untuk "Trik Cara Membuat Breadcrumb di Blogspot"

  1. kenapa ya, kok menu breadcrumb ku tidak muncul di website, padahal sudah saya pasang kode di atas..

    BalasHapus
  2. Saya sudah liat template Amalul, sepertinya memang tidak support untuk dipasangi script breadcrumb seperti di posting ini. Coba aja googling di blog lain ya mungkin ada yang cocok untuk template Amalul.

    BalasHapus
  3. Wah Gan blogspot ane kyknya gak bisa, masa' gak ada kode di template ane, udah coba di buat sendiri. eh malah error... waduh gimana solusinya yah Gan?

    BalasHapus
  4. gan, kalo kode _ di template ada dua, pilih di letakan dimana skripnya ya?

    BalasHapus
  5. @kontesid
    Pilih kode yang pertama..:D

    BalasHapus
  6. makasih gan sudah saya buat sesuai petunjuk di atas and its done, salam sukses dan salam kenal

    BalasHapus
  7. oke deh gan..mau dicoba dlu...thx yooo

    BalasHapus
  8. makasih bang tipsnya......
    sekalian blogwalking.... (http://gallerywallpapper.blogspot.com/)

    BalasHapus
  9. terima kasih gan infonya,,,,
    ane coba..

    BalasHapus
  10. gan ini saya ada masalah,, dulu udah berhasil bikin breadcrumb, tp kemarin2 pas template, javascript+ html nya saya compress, tiba2 breadcrumb nya jd hilang,

    trus saya coba bikin lagi breadcrumb pake cara di atas juga tetep ga muncul.. itu kenapa ya?

    dan jg knapa pas abis di compress itu tiap judul postingan di blog saya jd ga ada link nya? padahal dulu otomatis ada..
    (maaf pertanyaanya banyak,hhe..trims sebelumnya)

    BalasHapus
  11. ralat gan,
    alhamdulillah setelah coba2, yg Breadcrumb udh berhasil kembali lg,, tp gimana cara memperkecil huruf di breadcrumb?

    dan untuk judul postingan, masih ga ada link nya..
    duh saya jadi pusiinnkk... kasih pencerahan ya gan ..^^

    BalasHapus
  12. @Gaemgyu Holic
    Pada template kamu ternyata hanya ada 1 jenis huruf utama yang dipakai yaitu Comic Sans MS ya. Untuk mengecilkan huruf pada breadcrumbs coba cari kode seperti ini dalam template kamu :
    .breadcrumbs{font-size:20%;line-height:1.4em;border-bottom:1px solid #ccc;margin:0 0 5px;padding:5px 5px 5px 0}
    Kalau sudah ketemu, ganti tulisan font-size:20%;line-height:1.4em dengan font-size:10px;line-height:1.2em

    Semoga membantu !!

    BalasHapus
  13. ukurannya ttp ga berubah gan,, knapa breadcrumb ny ga bisa di edit ya? soalnya saya udah coba ganti font, tp ttp aja jenis hurufnya jg sama kaya sbelumnya...

    BalasHapus
  14. @Gaemgyu Holic
    Coba tambahkan 1 baris kode CSS lagi untuk jenis font sehingga kode lengkapnya menjadi seperti ini :

    .breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font:verdana; font-size:10px; line-height:1.2em; border-bottom:3px double #e6e4e3;}

    Saya sudah download template Yoga Girl Health seperti punya sobat di http://www.ipietoon.com/2011/01/blogger-template-yoga-girl-health.html dan menurut hasil komparasi yang saya lihat ada beberapa pengaturan CSS yang hilang pada blog sobat. Kemungkinan akibat kesalahan editing template dan juga pada waktu mengkompresi javascript dan CSS ~x(. Kesalahan fatal memang jika sebelumnya sobat tidak melakukan download full template sebelum melakukan editing. So kalau masih gagal coba aja download template baru dan lakukan penggantian secara manual saja (hapus manual isi template lama dan paste isi template baru..!!). Sebelumnya copy dulu juga semua widget/gadget yang ada di sidebar dan footer, kemudian masukkan secara manual widget tadi satu per satu pada template yang baru.

    Good luck..!! ;)

    BalasHapus
  15. Makasih mas...dari sekian script, yang ini bisa untuk template aku... jempol untuk anda.

    BalasHapus
  16. kasus saya sama seperti blog amalul ahli gan... ada solusi lain?

    BalasHapus
  17. Nampaknya ini lebih lengkap yah ...
    Breadcrumb saya terlalu simple Htmlnya dan CSS tidak mempan ...
    Bookmark dulu ... Thank gan ...

    BalasHapus
  18. wah nerguna just share kk..

    kunjungi balik ya.

    http://samsoftware-cyber.blogspot.com/search/label/Blog

    BalasHapus
  19. Saya juga dah coba yg dari mas tapi ga bisa, kayaknya ada yang salah tuh, coz saya coba di trik blog ini : http://www.bamz.us/2012/03/pasang-breadcrumb-google-di-blogger.html BISA. btw thanks dah sharing

    BalasHapus
  20. thanks infohnya gan,,,
    mantap artikel sma blognya :)

    BalasHapus
  21. punya saya ko' error ya gan. dmn letak kesalahanya gan..?
    tolong d bantu ya gan. mksh..

    BalasHapus
  22. keren brayy saya coba dulu......

    BalasHapus
  23. nice sharing...say abaru mau buat semoga berhasil dan bisa aktif

    BalasHapus
  24. Thanks gan tutorialnya, saya coba dulu..

    BalasHapus
  25. Asik ada juga tutorialnya , makasih sob udah di share :D

    BalasHapus
  26. kalau memakai cara manual saya masih mengalami kesulitan,apakah ada sofwer untuk mendownload sebab web ane pakai wordpress.terima kasih tutorialnya,apakah breadcrumb mempunyai peranan penting,dalam on page seo suatu website.

    BalasHapus