Cara Membuat Breadcrumb Menu Pada Blog

Kali ini Tutorial Blog ingin berbagi buat teman-teman Blogger tentang Cara Membuat Breadcrumb Menu Pada Blog yang berada di atas artikel posting. Breadcrumb, merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Dengan breadcrumb, pada artikel blog akan muncul menu tambahan di bagian atas. Menu tersebut akan ditampilkan dengan format Home > [Nama Label] > Judul Posting, seperti contoh pada blog ini.

Selain memudahkan navigasi, breadcrumb juga dipercaya memudahkan search engine untuk mengindeks posting.

Langkah-langkah Membuat Breadcrumb Pada Blogger

1.     Login ke Blogger dengan akun kamu

2.     Selanjutnnya, pilih  Design dan kemudian pilih Edit HTML, jangan lupa contreng tulisan Expand Widget Templates.

3.     Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard kamu untuk membantu pencarian):

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

4.     Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

Code Script

<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,cari 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.     Sekarang cari kode

]]></b:skin>

Jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya..

Code Script

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

8.     Kemudian Simpan Templates dan Selesai.

Menu breadcrumbs ini hanya akan terlihat diatas artikel kamu atau dibawah judul blog  saat kamu membuka halaman suatu posting bukan halaman utama blogspot

Selamat mencoba