Cara Membuat Navigasi BreadCrumbs - SEO Friendly

Navigasi BreadCrumbs, merupakan sebuah navigasi yang berada di sebuah blog dan biasanya terletak di atas judul artikel. Navigasi Breadcrumbs sendiri berfungsi sebagai navigasi yang menampilkan label entri atau artikel kita dan tentunya navigasi ini mempunyai banyak keunggulan, salah satunya yaitu SEO Friendly. Cara ini lebih ampuh dari pada 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.

Screenshotnya untuk sementara ini belum ada karena memakai jujur blog ini sendiri belum memakai breadcrumbs. Sudah paham bukan? Sekarang akan saya kasih tahu cara pemasangannya, berikut cara-caranya:

1. Login - Layout / Rancangan - Edit HTML

2. Klik kotak Expand Template Widget { ada di bagian kanan atas }

3. Kemudian, 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 Hacker 14/11/2010 http://the-killermedia.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 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


Semoga Bermanfaat. :D

Description: Cara Membuat Navigasi BreadCrumbs - SEO Friendly Rating: 5 Reviewer: Coba Coba - ItemReviewed: Cara Membuat Navigasi BreadCrumbs - SEO Friendly