Monday, August 27, 2012

Cara Membuat Breadcrumbs yang Terindeks Google


Breadcrumbs ? apa itu ? breadcrumbs itu semacam navigasi pada blog. Tujuannya tidak lain untuk memudahkan pengunjung blog kita. Pada blogger, breadcrumbs akan ditampilkan sesuai dengan label yang ada. Dan navigasi breadcrumbs ini akan segera terindeks oleh si Google hanya dalam waktu 2 atau 3 hari (sesuai pengalaman saya) dan lebih ramah terhadap SEO tentunya. Nih bukti jika blog saya yang sudah memakai breadcrumbs terindeks oleh om Google.


Nah jika kalian tertarik untuk membuatnya, silakan lihat caranya di bawah ini, perhatikan dengan seksama oke :)

1. Login ke Blogger seperti biasa

2. Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini 
3. Masih di bagian Template, sekarang kamu klik Edit HTML --> Pilih Lanjutkan --> Sekarang kamu cari kode ]]></b:skin> gunakan CTRL + F untuk memudahkan pencarian.

4. Salin kode di bawah ini dan letakkan diatas 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;}

5.  Cari kode <b:includable id='main' var='top'> kemudian kamu hapus kode <b:includable id='main' var='top'> dan ganti kode yang tadi sudah dihapus dengan kode di bawah 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'/>
 
6. Klik Simpan dan nantinya breadcrumbs yang kamu buat akan segera terindeks oleh Google.

Postingan Terkait:

68 comments:

  1. punya aku belum ada ininya hehehe, terima kasih atas kunjungan diblogku, salam! :D

    ReplyDelete
    Replies
    1. salam juga bang basid :) dipakelah kalau belum ada :)

      Delete
  2. pertamaxxxx gan,....


    kebetulan blog ane udah ada,
    jdi nyimak aja deh,..
    :)

    ReplyDelete
  3. wah panjang ya scriptnya, tapi memang sangat penting agar mudah terindex sama google.

    ReplyDelete
    Replies
    1. panjang scriptnya juga tapikan tinggal copas doang :D

      Delete
  4. Mantap sob... :)
    Skalian mengucapin met lebaran..
    Mohon mav lahir n bathin ya sob :)

    ReplyDelete
  5. perasaan ane dah pasang ne breadchumb? Tp gk tau sama gk scriptnya ma yg ini?

    ReplyDelete
  6. trimakasih scriptnya sobat, mbah google katanya seneng sama blog yang ada breadcrumbnya:}

    ReplyDelete
    Replies
    1. wah mbah google kenal ama ente juga yah gan :D

      Delete
  7. alhamdulillah ku udah masang gan . .hehehe udah lama terindek di om google

    ReplyDelete
  8. wah mantab ya kalau ramah dengan SEO

    sangat bermanfaat... :)

    ReplyDelete
  9. kunjungangan balik ku sob.. btw minal aidin wal faizin mohon maaf lahir batin y sob..

    ReplyDelete
    Replies
    1. maaf lahir batin juga gan, makasih sudah datang

      Delete
  10. udah terpasang sejak awal ngeblog ahihi =))

    ReplyDelete
  11. ini memungkinkan sang admins jadi populer juga ya..
    btw, banyak istilah baru yang berguna buat saya.

    ReplyDelete
  12. Sudah beberapa tutor saya ikuti tapi kok gak bisa ya gan.?yaa akhirnya terima keadaan aja.:)
    padahal saya pengen juga breadcrumbs saya ke indek ma gugel.

    ReplyDelete
    Replies
    1. coba pake yang ini om, pnya saya terindeks tuh :)

      Delete
  13. mf lahir bathin ya bos..
    ikut nyimak ya bos..lumayan buat nambah ilmu

    ReplyDelete
  14. wah wah keren nih breadcrumbnya sobat...

    ReplyDelete
  15. wah, tambah lagi satu istilah baru.
    saya coba, saya coba,...
    yang kemarin kayaknya susah sekali...
    terima kasih ^_^

    ReplyDelete
  16. gue udah pernah nyoba masang ini gak nongol bang ...
    mungikin templatenya kali yaah

    ReplyDelete
    Replies
    1. yang bener? mungkin saja begitu om, ntar saya coba kasih yang lain lagi

      Delete
  17. alhamdulilah breadcrumbs saya sudah rapih di blog dan terindeks

    ReplyDelete
  18. yowman, sangaat bagus lah itu :)

    ReplyDelete
  19. Menarik nih sob....boleh langsung praktek

    ReplyDelete
  20. Terima kasih infonya, sdh sy coba ttp msh blm berhasil. Tlg pencerahannya.

    ReplyDelete
  21. wah perlu banget nei bang. supaya bisa tambah visitor ya kalau mangkal di google. makasih nei bang.

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) hehe iyah jadi banyak kayak blog abang

      Delete
  22. Mantap sekali sob, memang benar mas Google sangat menyukai blog yang memiliki navigasi yang baik seperti adanya breadcrumb ini,,,,SELAGI MASIH DALAM SUASANA IDUL FITRI IZINKAN SAYA MENGUCAPKAN MINAL AIDZIN WAL FA IDZIN MOHON MAAF LAHIR DAN BATHIN

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) thnaks mas oboy, maaf lahir batin juja yah

      Delete
  23. wah mantap nie..
    terima kasih kawan..
    materinya sangat bermanfaat untuk blog saya.,,

    ReplyDelete

  24. The widget with id "Blog1" cannot contain element: "#text". A widget can only contain b:includable elements.


    GIMANA NIH

    ReplyDelete
    Replies
    1. ente coba lagi, mungkin saat copas ada kode yang terhapus, kalau ada tulisan

      "readmore :http://hzndi....." di hapus saja

      Delete
    2. ada kesalahan dalam kodenya dan udah ane ganti, silakan dicoba

      Delete
  25. Replies
    1. sekarang ente coba, kodenya udah ane ganti

      Delete
  26. blog saya juga sudah menerapkan ini.. btw gima caranya bikin komentar adminnya kayak di blog sobat ini..?? keren...

    ReplyDelete
    Replies
    1. pertama ente bikin dulu threaded comment seperti disini

      http://hzndi.blogspot.com/2012/08/cara-membuat-threaded-comment-untuk.html

      kemudian untuk kode CSS-nya adalah disini

      http://hzndi.blogspot.com/2012/06/membuat-threaded-comment-dengan-3.html?=1

      Delete
  27. Makasih master. Sangat berguna buat newbie seperti saya.

    ReplyDelete
    Replies
    1. hehe bisa aja nih si om bilang ane master segala

      Delete
  28. Wah berbeda nih breadcrumbnya sama punya ane gan. Ijin nyoba dulu yah gan :)

    ReplyDelete
  29. hadir lagi sob..emang uda ta coba cara ini tapi di google ko g nongol,kira2 knp y?pa bwaan template

    ReplyDelete
    Replies
    1. tunggu beberapa hari gan, tadinya ane juga gitu eh sekarang udah nongol

      Delete
  30. Makasih sob sharenya,..
    sangat berguna...
    tapi nampaknnya ini model semua label masuk di bradcumb yaah...??

    ReplyDelete
  31. Thanks bro, blogku sekarang udah ada bredcrumbsnya.... semoga tambah bagus buat SEO

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More