Cara Membuat Navigasi BreadCrumbs - SEO Friendly

BreadCrumbs, menu navigasi seperti menu DTree jika disorot, selalu menjadi pilihan para SEO-er jika ingin menjadikan blognya SEO Friendly. Cara ini lebih ampuh daripada yang biasanya karena yang tampil pada Search Engine adalah seluruh judul posting, bukan sebagian.

Apalagi untuk blogspot yang mempunyai kelemahan hanya beberapa kata saja yang ditampilkan pada permalink, tidak seperti wordpress yang menampilkan seluruh kata pada judul sebagai permalink. Nah, dengan cara ini, kita dapat menutupi kekurangan tersebut sekaligus menambah kekuatannya dengan menambah kategori pada indeks Search Engine sehingga bisa memberikan efek tersendiri pada posting seperti penambahan kekuatan keyword dan sebagainya. Untuk contoh, breadcrumbs itu sendiri adalah seperti berikut ini:

Screenshot diambil dari blog KR karena memakai breadcrumbs. Sudah paham bukan? Sekarang pemasangannya, berikut cara-caranya:

1. Login - Layout - Edit HTML
2. Klik kotak Expand Template Widget
3. Cari kode berikut ini:
   <b:includable id='main' var='top'>
4. Jika sudah ketemu, letakkan kode berikut tepat di atas kode tadi:
   <b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Ardi33 16/03/2010 http://www.ardi33.web.id/ -->
  <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. Kdemudian cari kode berikut:
   <b:if cond='data:post.dateHeader'>
6. Kalo sudah ketemu, letakkan kode berikut di atas kode tadi:
   <b:include data='post' name='breadcrumbs'/>
7. Untuk kustomisasi, paste kode berikut di atas kode ]]></b:skin> dan berikut kodenya:
   .breadcrumbs {
margin:0 0 0.5em;
font-size: 86%;
padding:0 0 0.5em;
}
8. Klik Save Template

Navigasi ini muncul di bawah judul posting dan hanya tampil pada inner-page, bukan home-page. [ardi33]