Cara Membuat dan Memasang Breadcrumbs di Blogspot

Breadcrumb adalah sebuah menu navigasi untuk mempermudah pengunjung web/blog untuk melacak lokasi dalam dokumen atau postingan yg sedang di baca. Dengan breadcrumb ini pengunjug akan mengetahui kategori label apa yang dia baca. Breadcrumb sendiri biasanya berada di bawah header atau di atas judul postingan.
Cara Membuat dan Memasang Breadcrumbs di Blogspot
Breadcrumb juga dapat memperkaya kata kunci dalam postingan web atau blog kita, tentunya sangat baik untuk SEO blog. Menurut pakar SEO memasang breadcrumb juga akan membuat konten/postingan blog lebih cepat terindex oleh search engine dan membuat tampilan di search engine akan lebih menarik.
Cara Membuat dan Memasang Breadcrumbs di Blogspot
Berikut ini Cara membuat Breadcrumbs di Blogspot.
  • Login di Blogger.
  • Pilih Template.
  • Pilih Edit HTML (saya sarankan untuk mem back up template anda dulu guna menghindari kesalahan).
  • Centang Expand Widget Templates.
  • Kemudian cari kode ]]></b:skin>.
  • Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>.
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
  • Kemudian cari kode <b:includable id='main' var='top'>gunakanlah CTRL+F untuk mempercepat pencarian.
  • Ganti kode  <b:includable id='main' var='top'> dengan kode yang dibawah ini :
  • <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:loop>
    &#187; <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
    <b:include data='posts' name='breadcrumb'/>
    • Kemudian silahkan save.
    Untuk mengecek berhasil atau tidaknya pemasangan breadcrumb anda bisa mengeceknya di sini > http://www.google.com/webmasters/tools/richsnippets. Semoga bermanfaat. Baca juga tips memperbaiki broken link.

BAGIKAN KE

Facebook Google+ Twitter Digg

Artikel Terkait

Comments
32 Comments

32 Responses to "Cara Membuat dan Memasang Breadcrumbs di Blogspot"

  1. selamat sore mas..
    terima kasih infonya mas

    BalasHapus
  2. kira-kira itu memberatkan load kaga ya mas, soalnya saya lihat kodenya banyak banget ??

    BalasHapus
  3. Trik yg mantab sob,,,terus berkeasi sob ane dukung..:)
    jangn lupa visit back ya, thanks

    BalasHapus
  4. @Adytiya Hary Priyatna
    saya juga punya pertanyaan yang sama, ini memberatkan loading gak bang?

    oiya, kunjungan awal nihh bang.

    BalasHapus
  5. Walah.. ternyata sobat sdh membahasnya disini juga padahal kemarin sempat nanya di blog saya. Baguslah kalau begitu.. Salam kenal aja sob... (y)

    BalasHapus
  6. .. wachhhhh,, aq udah pake kawan. he..86x ..

    BalasHapus
  7. aq udah punya, hehehe
    emang bermanfaat loh ini.

    harus diapsang di blog, harus

    BalasHapus
  8. mantap sob...
    tapi ane udah ada, bawaan template

    BalasHapus
  9. langsung di coba mas broo :-)

    BalasHapus
  10. Ntar saya modifikasi dulu dech,, biar tmbh ok
    makasih yea ixixixixi

    Backlink ==> http://www.romantis-xp.asia

    BalasHapus
  11. mau nanya, Bisa gak link url blogspot dipakaikan Breadcrumbs. jadi maksud saya http://www.magetanindah.com/2013/01/cara-membuat-dan-memasang-breadcrumbs.html menjadi http://www.magetanindah.com/Tips-dan-Trik/cara-membuat-dan-memasang-breadcrumbs.html

    BalasHapus
  12. sangat bermanfaat ... maju terus pantang mundur

    BalasHapus
  13. @lukman hakim Sore Mas Lukman, wah maaf telat balasnya, soalnya masih ada kesibukan.Alhamdulillah baik kabar saya, semoga saja Mas juga baik.

    BalasHapus
  14. @Dirga Bsc Menurut saya tdk terlalu memberatkan kok mas.

    BalasHapus
  15. @Agung Talaga Iya mas agung, kemaren memang ada duplikat breadcrumb di blog saya, setelah saya utak utik akhirnya ketemu juga kesalahannya.

    BalasHapus
  16. @mohamad rivai Benar Mas Rivai, karena menurut saya navigasi ini sangat banyak gunanya.

    BalasHapus
  17. nice tutor gan :)
    ini cukup penting di serp,
    thanks for share

    BalasHapus
  18. @Sundul Siaap gan, keep smile and happy blogging.

    BalasHapus
  19. @Aryanto hadi wicaksono Pertanyaan yang menarik nih, saat ini saya belum mengetahuinya, namun akan saya coba untuk mengubah kodenya, terima kasih atas sarannya.

    BalasHapus
  20. Mantap sob... tapi udah pake breadcrumbs sob :)

    BalasHapus
  21. @Ardian Tokotua Siiplah mas kalau sudah memakainya di blog anda.

    BalasHapus
  22. Salam kenal gan,
    oh ya.. saya mau tanya..
    setelah saya pakai tutorial agan ... kenapa ya.. ada tulisan coretan di nama komentarnya???
    bagaimana cara menghapusnya???

    BalasHapus
  23. @Ahmad Saadillahcontohnya gimana mas, biakah saya menuju ke blog anda yang ada problemnya.

    BalasHapus
  24. Siip mas, saya dah coba dan berhasil.

    BalasHapus

1.Tinggalkan Komentar Sobat di Blog ini.
2.Kritik dan saran dari sobat kami terima dg senang hati.
3.Komentar Sobat adalah sebuah PENGHARGAAN dan SILATURAHMI buat blog ini.
--- TERIMA KASIH DAN SALAM SUKSES BUAT ANDA ---

SITE INFO

Google+ Followers