Cara Membuat Navigasi Situs Breadcrumbs Optimasi SEO Blogging Tips

Navigasi situs breadcrumbs adalah sebaris tautan internal menu biasanya terletak dibagian atas posting yang dapat memudahkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Biasanya navigasi situs breadcrumbs memiliki laman umum (Home / Beranda) sebagai tautan pertama, disebelah kanan adalah bagian yang spesifik biasanya berupa label dan paling ujung sebelah kanan merupakan bagian paling spesifik (judul posting). Navigasi situs breadcrumbs selalu menjadi pilihan pakar SEO, selain untuk mempercantik halaman konon search engine terutama Google sangat menyukainya. Contoh navigasi situs breadcrumbs

Berikut adalah cara membuat navigasi situs breadcrumbs, cara pertama merupakan hasil modifikasi CSS. Sedangkan cara yang kedua navigasi situs breadcrumbs standar, namun tampilan dan hasilnya sama saja dengan cara yang pertama. Silahkan mau pake yang mana…


Cara PERTAMA


1. Pada html template, cari kode ini :

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

Lalu, tambahkan kode di bawah ini tepat di atas kode tadi

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Sidik Nurdin 28/11/2009 http://tipsblogging-seo.blogspot.com/ -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  >
<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'>
>  <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

2.    Cari kode di bawah ini :

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

Tambahkan kode di bawah ini tepat di atas kode tadi
<b:include data='post' name='breadcrumbs'/>

3.    Terakhir, tambahkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
/* Breadcrumbs
----------------------------------------------- */
.breadcrumbs {
margin:0 0 0.5em;
font-size: 86%;
padding:0 0 0.5em;
}

4.    Penutup, save template dan lihat hasilnya dengan membuka salah satu postingan Anda, Selamat mencoba...


Cara KEDUA

1.    Cari kode di bawah ini pada template html Anda
<b:if cond='data:post.title'>

Jika sudah ketemu, tambahkan kode di bawah ini tepat di bawah kode tadi
<b:if cond='data:blog.pageType == "item"'><a href='http://tipsblogging-seo.blogspot.com/'>Home</a> »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</b:if>

2.    Save template dan lihat hasilnya sama dengan cara PERTAMA

Artikel Terkait: