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.


Good Luck

     
Share this article :
 

Posting Komentar

 
Support : SIMPLE BLOG © 2012 - All Rights Reserved
Edited by Hadi Atmaja Proudly powered by Blogger