Membuat Breadcrumb Menu Pada Blog

Menu Breadcrumb ialah Menu navigasi yang berurutan di atas artikel posting. Dengan Menu Breadcrumb ini membuat atau merupakan cara efektif untuk memberikan kemudahan bagi pengunjung dalam melihat kategori posting pada suatu blog.

Selain itu dari segi kerapian, kemudahan juga dari segi SEO (Search Engine Optimization), Google sudah support / mendukung Menu Breadcrumb ini. Sehingga sangat Penting untuk diterapkan pada suatu Blog demi kepentingan SEO (Search Engine Optimization).

Ok Langsung Aja ke TKP==>>

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.

Menu navigasi Breadcrumbs ini hanya akan terlihat diatas artikel anda atau dibawah judul blog anda saat anda membuka halaman suatu posting bukan halaman utama blogspot anda.

Selamat Berusaha, 

Cara KeDua

Langkah langkahnya langsung saja :

1. Masuk ke Layout > Edit HTML > checklist Expand Widget Templates.

2. Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut. Download Template terlebih dahulu.

3. Copy Paste kode berikut sebelum kode ini ]]></b:skin>

    .breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}

4. Cari kode <b:includable id='main' var='top'> copy paste kode dibawah ini letakkan di atas kode <b:includable id='main' var='top'>

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

    <!-- Breadcrumbs By Warung Seo http://kutak-ketik.blogspot.com -->

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <p class='breadcrumbs'>

    <span class='post-labels'>

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

    Go&#160; :

    <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 == &quot;true&quot;'>

    <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. Selanjutnya cari kode <b:loop values='data:posts' var='post'> (biasanya ada 2 atau 3 kode yg sama pilih kode yang pertama untuk yang 2 kode yang sama, sedangkan untuk yang 3 kode yang sama pilih yang kedua) dan copy paste kode berikut dan letakkan di bawah kode <b:loop values='data:posts' var='post'>

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

6. Simpan Template dan lihat hasilnya

Semoga berhasil dan bermanfaat, jika dalam praktek tidak berhasil pastikan anda untuk membacanya sekali lagi, awalnya saya juga susah tapi berhasil juga..he..he..

Bagikan lewat :

Tweet

Anda sedang membaca artikel tentang Membuat Breadcrumb Menu Pada Blog dan anda bisa menemukan artikel Membuat Breadcrumb Menu Pada Blog ini dengan URL http://really-really-good.blogspot.com/2011/12/membuat-breadcrumb-menu-pada-blog.html. Anda boleh menyebarluaskannya atau meng-copy paste-nya jika artikel Membuat Breadcrumb Menu Pada Blog ini bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan LINK Membuat Breadcrumb Menu Pada Blog sebagai sumbernya.

<a href='http://really-really-good.blogspot.com/2011/12/membuat-breadcrumb-menu-pada-blog.html'>Membuat Breadcrumb Menu Pada Blog</a>

Artikel lain yang mungkin ingin anda baca!

Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!