Tuesday, May 31, 2011

Membuat Menu Navigasi Breadcrumb

BreadCrumb Navigation, Breadcrumb Navigation ialah sebuah cara untuk mempermudah bagi Search Engine untuk menemukan artikel - artikel blog atau website kita, Tidak hanya demikian dengan cara ini maka pembaca dapat dengan mudah melihat posisi artikel yang di baca serta mencari artikel dalam satu label atau kategori.
Menu navigasi BreadCrumb ini juga dapat di pakai untuk
blog yang template nya belum dikatakan Seo Friendly,
Dengan cara ini blog atau website kita jadi lebih Seo Friendly, Dan juga untuk blog yang template nya bawaan dari blogger atau pun template yang sudah lama juga bisa di pasang Menu Navigasi ini,
Berikut langkah - lankgah nya,





  • Login Akun Blogger anda
  • Masuk ke Tata Letak
  • Pilih Edit HTML
  • dan kalau anda ingin lebih aman lagi, klik download template lengkap, agar template bisa di backup.
  • Centang tulisan " Expand Template Widget "
  • Kemudian cari script berikut ]]></b:skin>
  • Selanjutnya copy dan pastekan script di bawah ini tepat di atas  ]]></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;
}
  •  Setelah itu Silahkan cari script berikut pada template blog anda,  
<div class='post hentry uncustomized-post-template'>
  • Selanjutnya copy dan  paste kan script di bawah ini persis di bawah kode,<div class='post hentry uncustomized-post-template'>
Browse &#187; <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;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <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 &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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>

  • Dan terakhir tinggal di save saja,
  • Dan lihat lah perbedaan nya.

1 comment:

  1. Ini ada contoh horizontal menu, vertical menu atau dropdown menu, tinggal download ajaa
    www.designedmenus-d.blogspot.com

    ReplyDelete