Cara Memasang Breadcrumb Google di Blogspot / Blogger

Cara Memasang Breadcrumb Google di Blogspot / Blogger -



Akhirnya bisa bisa posting tentang Breadcrumbs, setelah browsing sana sini akhirnya saya dapat juga kodenya, sekalian share ilmu

apa sich itu Breadcrumbs:

Breadcrumb navigation adalah suatu bentuk navigasi konten blog kita sedemikian rupa sehingga bisa membantu pengunjung lebih mudah untuk menjelajah konten blog.


Cara Memasang Breadcrumb Google di Blogspot / Blogger

  • Langkah pertama untuk memasang Breadcrumb Google tentu saja anda harus login dulu ke blogger
  • Seperti biasa, ke halaman design > edit HTML > Expand Widget Templates (jangan lupa selalu backup template sebelum editing)
  • Cari kode <b:include data='top' name='status-message'/> , biasanya ada 2 kode tersebut. Kalau sudah di temukan, silahkan paste kode berikut ini tepat di atasnya (paste aja di atas 2 kode yang anda temukan biar ga bingung).
    <b:include data='posts' name='breadcrumb'/>
  • Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode<b:includable id='main' var='top'>
<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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>
Simpan Template dan selesai, anda berhasil memasang breadcrumb google di blog anda.

Untuk mempercantik Breadcrumb google yang sudah anda pasang, sekarang tambahkan sedikit sentuhan Css berikut ini yang perlu anda tambahkan di atas kode ]]></b:skin>

.breadcrumbs{margin-left:10px;padding: 5px 0;border-bottom: 1px dotted; line-height:1.4em;}

maka hasilnya akan seperti ini


Semoga artikel ini bermanfaat...
thanks... 

19 Responses to "Cara Memasang Breadcrumb Google di Blogspot / Blogger"

  1. Belum mudeng apa'an itu breadcrumb mas, kasih screen shot dunk :)

    BalasHapus
  2. breadcrumb itu apa????..hhe saya masih belum tau, n masih harus belajar, maklum masih newbie
    salam kenal

    BalasHapus
  3. @saputarMZ iya mas, sorry ya...
    @masblue thanks ya gan
    @kolestol yup..

    BalasHapus
  4. Oh ya, ini keidek googlenya langsung atau pake nunggu dulu.
    soalnya aku pasang di blog jadi, tapi di pencarian kok gak berubah....

    BalasHapus
  5. wah mantab nih :) keren deh :D

    BalasHapus
  6. thnaks ya sob udah berkunjung kemari..

    BalasHapus
  7. artikelnya sngat bermanfaat sob. terima kasih

    BalasHapus
  8. sudah ane pasang om,,tp tetep gak muncul om,,gimana om

    BalasHapus
  9. biasanya nunggu om enggak langsung muncul, ane juga begitu om setelah 1 minggu udah muncul...

    BalasHapus
  10. thanks ya sudah share.sukses diterapkan :)

    BalasHapus
  11. sama-sama sob udah berkunjung ke blog ane....

    BalasHapus
  12. thank sob, udah saya coba pasang di blog, dan sukses

    BalasHapus
  13. info yang sangat bagus mas,,,info yang sngat bermanfaat sekali buat saya,,terima kasih banyak ya...semoga selalu menciptakan karya-karya terbaiknya,, dan ditunggu update postingannya selanjutnya...mantap!!

    BalasHapus
  14. Terimakasih untuk tutorial cara memasang breadcrumnya, dengan cara ini semoga cepat terindex google. Terimakasih ya...

    BalasHapus

Jangan Menulis Komentar Mengandung
SPAM, SARA, P*RNO Atau KATA KASAR..!!