Cara Membuat Breadcrumbs Pada Blogger

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.

Dengan menu navigasi breadcrumb, pada 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.     Pertama, pastikan anda sudah membuat label pada blog.

2.     Selanjutnnya, pergi ke Dashboard, lalu pilih Design 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 Dua Bedo 9/11/2010 http://duabedo.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..

.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 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 mencoba, semoga berhasil dan sukses selalu