Cara Membuat Navigasi Breadcrumbs dan Google Translate

Sekarang saya akan membahas tentang Cara Membuat Navigasi Breadcrumbs dan Google Translate. Sebelumnya apa itu breadcrumbs? Breadcrumbs adalah navigasi di atas postingan yang berbentuk hirarki. Dalam  hal ini digunakan dalam istilah website menjadi navigasi postingan yang menunjukan dimana adanya postingan tersebut.
plustranslate

Pada blog berbasis WordPress akan lebih tersusun secara hirarki karena bisa membuat child category, memudahkan visitor mengetahui letak artikel tersebut. Pada blog berbasis Blogspot / Blogger, breadcrumbs tidak bisa tampil seperti itu. Namun hanya menampilan label dimana berada postingan tersebut. Apabila terdapat 2 label atau lebih, maka semua label akan di tampilkan.

Keuntungan Memakai Breadcrumbs:
  1. Mempermudah visitor untuk mengetahui kategori postingan
  2. Hanya satu klik untuk menuju menu Home
  3. Memperkecil  Bounce Rate
  4. Menambah  keyword dalam postingan
  5. Memberikan informasi yang dibutuhkan Search Engine, seperti Google dalam memahami struktur / skema sebuah Web/Blog.
  6. SEO Friendly
Disamping itu terdapat translate ke bahasa inggris yang berada di sebelah kanan breadcrumbs itu sendiri,saya buat simple dari tutorial yang di buat mas Taufik pada postingannya. Anda bisa lihat pada screentshoot di atas :D atau bisa lihat DEMO 

Untuk caranya bisa ikuti tutorial dibawah ini:
1. Masuk blogger.com
2. Pilih blog yang mau di pasang, bila mempunyai lebih dari satu blog
3. Pilih template dan klik Edit HTML
4. Cari Kode ]]></b:skin> dan pastekan kode CSS berikut di bawahnya
.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}
.breadcrumbs span.kanan {
float:right;
}
5. Cari Kode <b:includable id='main' var='top'>...</b:includable> dan ganti dengan kode berikut:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<!-- 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>
<span class='kanan'> 
<a expr:href='&quot;http://translate.google.com/translate?u=&quot; + data:blog.url + &quot;&amp;amp;langpair=id%7Cen&amp;amp;hl=en&quot;' rel='nofollow' target='_blank' title='English'>Translate &amp;#9658;</a>
</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 == "archive"'>
<!-- 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 == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<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'/>
6. Simpan template
Untuk Mengecek silahkan kunjungi : http://www.google.com/webmasters/tools/richsnippets

Update 2 Juni 2014:

Agar breadcrumbs ini valid HTML 5 silahkan ganti kode :
<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>
dengan kode berikut:
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
Semoga Ulasan diatas bisa membantu Anda dan selamat mencoba.

60 Responses to Cara Membuat Navigasi Breadcrumbs dan Google Translate

  1. kalau ada edit HTML saya sih cuma bisa nyimak saja

    ReplyDelete
    Replies
    1. Kok kita senasib yaa jenk..
      Kalau soal edit html.. Matilah kita

      Delete
    2. masih bisa kok sist.. tetap semangat =D

      Delete
  2. Ngomong" trims sudah berbagi walau aku kepingin mempraktekjanyaa tapi nggak bisa hehee
    Hmmm kepingin siih punya navigasi breadcrumbs

    ReplyDelete
    Replies
    1. sama2 sist.. sering2 mampir saja disini,,hehe :D

      Delete
  3. wah kode kode aku bingung mas,, nyimak aja ya mas ;)

    ReplyDelete
    Replies
    1. silahkan sist :) jangan lupa minum susunya =D

      Delete
  4. waahh.. dulu waktu gue pake blogspot pernah punya nih oom kayak beginian :D

    ReplyDelete
    Replies
    1. jangan kayaknya dunk mas,,hehe :D skarang beralih ke PHP yah :-d

      Delete
  5. Emm ini breadcumbs terindex Google ya? Apa si bedanya sama yang tidak terindex? :/ Emmm saya bingung kang mohon pencerahannya.

    ReplyDelete
    Replies
    1. intinya bisa cepat masuk halaman google mas, bila tidak terindek maka kita menuliskan judul yang sudah kita posting tidak ada dalam halaman google dan sebaliknya, kurang lebih seperti itu :D

      Delete
  6. manfaatnya termyata baik buat blog kita ya mas :)

    ReplyDelete
  7. Menarik juga idenya membuat breadcum sekaligus ada menu translatenya.

    ReplyDelete
    Replies
    1. ya mas felix =D sebenarnya ini ide mas Taufik :)

      Delete
  8. kebetulan template yang saya gunakan sudah ada bredcumb nya mas. Thanks ya atas share nya. Sangat bermanfaat :)

    ReplyDelete
  9. ooh kaya gitu caranya.. kereen nih, bisa dicoba (y) makasih share-nya ^^

    ReplyDelete
    Replies
    1. sama2 sist Rani :) silahkan di coba..

      Delete
  10. mirip2 pny mas topiq., terlihat lbh simple n hemat tempat, kapan2 aq coba sob! thx ya.. *smile

    ReplyDelete
  11. Alhamdulillah di blog ane sudah terpasang gan ;) hehe

    ReplyDelete
  12. maksudnya ada tombol Translate gitu ya, keren juga cara modifnya.. :)

    ReplyDelete
    Replies
    1. iya sist Leony :) kurang lebih seperti itu :D

      Delete
  13. pelajaran yang bagus mas, saya sih terima apa adanya saja, simple saja

    ReplyDelete
  14. Saya izin prakteknya ya mas :) dan saya izin mengambil CSS breadcrums nya saja hihi

    ReplyDelete
    Replies
    1. izin pakai sob d Blog sy.. thanks for sharingnnya :D
      salam damai

      Delete
  15. Mantap mas triknya .. mudah-mudahan saya bisa !!

    ReplyDelete
  16. Yang paling umum ya karena alasan seo friendly
    Menurut saya

    ReplyDelete
  17. nice blog gan, mantap PR nya. :D

    ReplyDelete
  18. dengan adanya bredcrumb ini, blog kita kelihatan rapi ya mas kalau dilihat dari serp gooogle, luar biasa mas tutorialnya ;)

    ReplyDelete
    Replies
    1. iya sist , saling berebutan di halaman utama google ^_^

      Delete
  19. breadchumbs ,, baru tahu ini saya mah :D makasih ilmunya,bermanfaat sekali, pasti ntar jadi lebih mudah pengunjung yg dari negara lain :)

    ReplyDelete
    Replies
    1. iya sam2 sist.. berharap bisa gtu bisa bermanfaat pada semua orang yang butuh :)

      Delete
  20. wah boleh juga nih mas kalau ada widget translate nya bareng bredcurmb nya. Jadi lebih hemat space ya :)

    ReplyDelete
  21. Boleh juga nih ntar tak coba-coba ya gan

    ReplyDelete
  22. ea mas navigasinya keren :D hehe eh iya nih Show hide konversi kode & emo nya gajalan tuh :)

    ReplyDelete
  23. saya tersesat dan kebingungan hwahahaha LOL :v

    ReplyDelete
    Replies
    1. kayak lagu cakra khan,hihi tersesat dimana sis dyah :D

      Delete
  24. pengen punya navigasi kaya gitu tapi ngga bisa ane :(

    ReplyDelete
  25. dengan breadcrumbs, sistem navigasi blog semakin jelas ya mas.. :)

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔