Wednesday, 16 May 2012

Cara Membuat Breadcrumb

Cara membuat Breadcrumb atau menu navigation di blogspot. Breadcrumb adalah menu navigasi yang bisa membantu pengunjung / visitor blog supaya mereka tahu sedang membuka / mengunjungi halaman apa dan berada di kategory atau label apa. Selain itu Breadcrumb juga diperlukan untuk mengoptimalkan Seo On Page. Pada template blogspot gratis masih banyak yang belum menambahkan Breadcrumb atau menu navigasi ini. Untuk template yang saya edit sendiri ( Template blogger Seo friendly BSeo-V1 dan Template blogger 3 kolom B1 ) alhamdulillah sudah ditambahkan Breadcrumb. Karena masih banyak template yang belum ditambahkan Breadcrumb, sekarang saya akan share cara membuat Breadcrumb di blogspot.

Cara membuat Breadcrumb di Blogspot

  • Login Blog anda > Design > Edit HTML dan centang Expand Widget templates
  • Cari kode ]]></b:skin> ( gunakan CTRL + F agar lebih mudah )
  • Paste kode berikut tepat diatas kode ]]></b:skin>
.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

  • Kemudian cari kode <b:includable id='post' var='post'>
  • Setelah ketemu, silahkan paste kode berikut tepat dibawah kode <b:includable id='post' var='post'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

  • Save template ( selesai ) 
Terima Kasih telah membaca Artikel ini dan semoga Artikel ini bermanfaat untuk anda .
Jangan lupa comend yah :D

Bijaklah dalam berkomentar
EmoticonEmoticon