Beranda > Seo, Tips Blogspot > Cara Membuat Breadcrumb Navigation Pada Blogspot

Cara Membuat Breadcrumb Navigation Pada Blogspot

Seperti yang kita tahu, sekarang google juga mempertimbangkan blog yang memakai Breadcrumb Navigation, Pasti Anda sudah tahu apa itu Breadcrumb Navigation, yang mana sering dipakai di berbagai blog wordpress.org tetapi sekarang blogspot pun bisa dipasangi Breadcrumb Navigation. Mau tahu caranya ??

1. Masuk ke account blogspot Anda

2. Klik Layout atau Tata Letak

3. Klik edit HTML

4. Centang Expand Widget Template dan kalau perlu download template sekalian untuk backup

5. Cari kode ]]></b:skin>

6. Letakkan kode dibawah ini 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;           
}

7.  Cari kode <div class=’post hentry uncustomized-post-template’>

8. Letakkan kode dibawah ini tepat dibawah kode <div class=’post hentry uncustomized-post-template’>

<b:if cond='data:blog.homepageUrl == data:blog.url'>          
<b:else/>           
 <b:if cond='data:blog.pageType == &quot;item&quot;'>           
 <div class='breadcrumbs'>
Browse »  <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 == &quot;true&quot;'> »           
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>           
 </b:if>           
» <span><data:post.title/></span>           
 </b:loop>           
 </b:if>           
 </b:loop>
</div>          
 </b:if>           
<b:else/>           
<b:if cond='data:blog.pageType == &quot;archive&quot;'>           
<div class='breadcrumbs'>           
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> 
</div>           
</b:if>           
<b:else/>           
 <b:if cond='data:navMessage'>           
<div class='breadcrumbs'>           
<data:navMessage/>           
</div>           
</b:if>           
</b:if>

9. Klik Simpan atau Save untuk menyimpan dan lihat hasilnya di atas judul postingan blog Anda

  1. Maret 28, 2010 pukul 6:42 pm

    thanks but how in wordpress ?

  2. Februari 11, 2011 pukul 10:37 pm

    Yang buat blogger juga ada toh? Wah, makasih bgt!

  3. Agustus 21, 2011 pukul 8:06 am

    Sudah saya praktekan n alhamdulillah berhasil sob… thanks sob tutorialnya…

  1. Oktober 28, 2009 pukul 12:16 pm
  2. Februari 16, 2010 pukul 8:43 am
  3. Januari 11, 2011 pukul 9:42 am

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: