Tips Membuat Breadcrumb

Kamis, 16 Juni 2011

Tips Membuat Breadcrumb


 Menu breadcrumb adalah menu navigasi yang ada dalam artikel pada blog kita.Sehingga pengunjung bisa mengetahui di kategori / label mana artikel terkait itu.Breadcrumbs sudah sangat populer di kalangan blogger indonesia dan juga website-website handal juga memakai nya..dan saya akan kasih tutorial cara membuat breadcrumbs pada posting/artikel blog.


cara membuat breadcrumb:
1.Pasikan pada blog anda sudah mempunyai label/kategori seperti yang sudah di jelaskan di atas.
2.Lalu Klik Rancangan lalu klik edit HTML.Dan klik Expand Widget Templates
3.Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):<b:includable id='main' var='top'>

  1. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.
    <b:includable id='breadcrumbs' var='post'>

    <!-- Breadcrumbs hack. By Hoctro 9/11/2006http://blogtyo.tk -->
      <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>

  2. Kemudian,cari lagi kode berikut:

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

  3. Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
    <b:include data='post' name='breadcrumbs'/>

  4. Nah,sekarang cari kode ]]></b:skin>,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.
    .breadcrumbs {
    border-bottom:1px dotted #000;
    margin:2em 0 0.5em;
    padding:0 0 0.5em;
    }

  5. Kemudian Simpan Template dan Selesai.




  Ini udah fix buat SEO dan bisa mendongkrak posisi di GOOGLE

0 Komentar di "Tips Membuat Breadcrumb"

Posting Komentar

Terima Kasih Udah Baca Artikel Blog Tyo. Silahkan berkomentar, bebas dan bertanggung jawab. Oh ya, masih banyak artikel bagus lho di blog ini, ditunggu komentar dan kunjungannya kembali