Cara Membuat Menu Navigasi Breadcrumb Di Blogspot

Menu Navigasi Breadcrumb ini merupakan salah satu penunjang SEO dalam sebuah blog. Dilihat dari pengertinya yaitu adalah sebaris link tautan internal pada bagian atas postingan atau dibawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat.

Cara Membuat Menu Navigasi Breadcrumb pada blogspot memang harus dilakukan secara manual. Tidak seperti pada wordpress yang memang kebanyakan templatenya sudah SEO Friendly alias sudah tersedia navigasi breadcrumbnya Nah untuk membuat blogspot SEO Friendly ada baiknya kita memasang navigasi breadcrumb di blog.

Saya yakin sudah banyak blogger yang sudah tidak asing dengan Navigasi Breadcrumb ini. Tapi siapa tahu masih ada yang belum tahu, dan juga bisa sebagai bookmark buat saya agar tidak repot2 mencari kesana kemari untuk membuatnya. jadi untuk para master blog lewati saja postingan ini. Hehehe

Untuk lebih jelasnya sobat bisa melihatnya dibagian atas setelah judul posting. atau perhatikan screenshot dibawah ini:

Demo

Berikut langkah-langkah membuatnya:

1. Masuk Rancangan/Layout
2. Pilih Edit HTML
3. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) Cari kode berikut:

]]></b:skin>

6. Copy lalu paste-kan kode dibawah ini tepat diatas kode diatas

.breadcrumbs {

border-bottom:1px dotted   #000;

margin:2em 0 0.5em;

padding:0 0 0.5em;

}

7.Kemudian carilah kode:

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

8. 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>

9. Kemudian,cari lagi kode berikut:

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

10.Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.

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

11.Kemudian Simpan Templates dan Selesai.



Selamat mencoba dan semoga berhasil,,

Note: 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.

source = http://pelajaran-blog.blogspot.com