Headlines News :
Home » » Membuat Navigasi Breadcrumbs

Membuat Navigasi Breadcrumbs

Sebenarnya breadcrumb ini tidak terlalu banyak fungsinya, melainkan hanya untuk kemudahan user / pengunjung saja dalam menjelajahi website kita. Akan tetapi, karena dalam bukunya sang mbah Google menyarankannya, maka tidak ada salahnya kan kalau kita memasangnya!!!
Breadcrumb biasanya muncul secara horizontal di bagian bawah judul artikel maupun di bagian atasnya. Breadcrumb menyediakan link untuk kembali ke tag halaman sebelumnya sehingga user atau pengunjung lebih mudah dalam menjelajahi suatu website.

Breadcrumb biasanya terlihat seperti ini:

Halaman Depan » Kategori/Tags/Archive » Artikel

Atau Bisa lihat Sreenshot berikut :

Nah...Sekarang bagaimana cara membuatnya?
Berikut caranya :
  • Silahkan login ke blogger degan ID anda.
  • Klik Tata Letak/Edit Html.
  • Klik Download Full Template and please back up your template first, Hal ini untuk berjaga-jaga agar anda punya salinan template tersebut.
  • Silahkan beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.
  • Silahkan cari kode ]]></b:skin> 
  • Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin> 

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;

  • Selanjutnya cari kode berikut pada template anda : 

    <div class='post hentry uncustomized-post-template'>

    • Copy  kode di bawah ini lalu paste persis di bawah kode Diatas


    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    Browse &#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>


    • Atau anda bisa juga meletakkan Kode tersebut tepat di atasnya kode berikut:

      <div class='post-header-line-1'/> 

      • Klik tombol Save Template.
      • Buka halaman blog anda, klik pada judul artikelnya. Silahkan lihat hasilnya.
      • Selesai.
      Sampai disini dulu, Selamat mencoba dan semoga bermanfaat.
      Share this article :

      3 komentar:

      1. yudisites.com makasih banyak yc dh mau menuhin req ane.. bat yang lain lo mau req tutorial ato apa aja dsni aja,, adminnya uda baik ganteng juga Lo..... gkgkgkgkg... Go yudisites.com!!!

        BalasHapus
      2. Wah...Jadi tersanjung ne sob :m: ,makasih atas kunjungannya :i:

        BalasHapus

      1 Kata dari komentar anda sangatlah berarti bagi saya

      Yudisites.com On Facebook

       
      Support : YudiSites.com | Free Software | Mas Template
      Copyright © 2011. YudiSites.Com - All Rights Reserved
      Template Created by Creating Website Published by Mas Template
      Proudly powered by Blogger