Cara Membuat Menu Breadcrumbs / Menu Navigasi

tak lupa tentang tips and trik, Shafiy naufal kali ini akan membagikan Cara Membuat Menu Breadcrumbs / Menu Navigasi. ini merupakan cara efektif untuk memudahkan pengunjung dalam melihat kategori posting suatu blog. dari segi seo (search engine optimization) pun Google sudah mendukung breadcrumbs ini.

Step Cara Membuat Menu Breadcrumbs di Blog:

1. Buatlah label blog terlebih dahulu, (klo yang udah buat langsung menuju tahap 2)
2. Selanjutnya pergi ke Dashboard-->Tata Letak-->Edit HTML
3. Centang Expand Widget Templates
4. Cari kode berikut (gunaka Ctrl+F supaya lebih mudah) 

<b:includable id='main' var='top'>

      5.   Setelah ketemu, letakkan breadcrumbs script berikut tepat diatasnya

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>

          Browse: 
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>

        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

     6.   Kemudian cari lagi kode berikut

<b:if cond='data:post.dateHeader'>

     7.   Kalau sudah ketemu, letakkan kode berikut diatasnya

<b:include data='post' name='breadcrumbs'/>

     8.   Sekarang Cari kode

]]></b:skin>

      
     9. Letakkan kode css berikut diatasnya

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

     10.  Simpan Template dan lihat hasilnya.


~semoga bermanfaat~