Saturday, 3 March 2012

Membuat Breadcrumb Menu Pada Blog

Membuat menu navigasi berurutan di atas artikel posting atau istilahnya disebut breadcrumb,merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.
Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini.



  1. Pertama,pastikan anda sudah membuat label pada blog.
  2. Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
  3. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):
    <b:includable id='main' var='top'>
  4. Setelah ketemu,letakkan breadcrumb 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>

  5. Kemudian,carai lagi kode berikut:

    <b:if cond='data:post.dateHeader'>
  6. Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
    <b:include data='post' name='breadcrumbs'/>
  7. 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;
    }

  8. Kemudian Simpan Templates dan Selesai.
sumber http://pelajaran-blog.blogspot.com


link ke posting ini

No comments:

Post a Comment