Breadcrumb Navigation adalah deretan navigasi sederhana yang terletak diatas judul artikel yang sedang dibaca pengunjung. Dengan adanya Breadcrumbs Navigation pengunjung menjadi mudah melihat kategori artikel yang sedang dibaca dan dengan mudah bisa mencari artikel lain dengan kategori yang sama dengan cara melakukan klik pada Breadcrumb Navigation tersebut. Selain untuk memudahkan pengunjung melihat dan mencari artikel berdasarkan kategori juga merupakan teknik SEO untuk mendongkrak SERP pada mesin pencari.
Untuk Membuat Breadcrumb Navigation Pada Blog sangatlah mudah,, kita hanya perlu menambahkan beberapa kode ke dalam edit HTML template blog. Dengan begitu blog kita sudah memiliki Breadcrumb Navigation. Untuk Membuat Breadcrumb Navigaton Pada Blog anda lakukanlah cara berikut :
1. Login pada account blogger anda
2. Pada halaman dasbor pilih Tata Letak kemudian Edit HTML dan jangan lupa centang kotak kecil disamping Expand widget template
3. Letakkan kode dibawah ini persis diatas kode ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
4. Selanjutnya carilah kode <div class='post hentry uncustomized-post-template'> pada halaman edit html template blog kemudian masukkan kode dibawah ini setelah kode tersebut.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
5. Simpan Template
Jika cara diatas telah dipraktekkan dengan benar lihat hasilnya pada blog anda dengan cara masuk ke salah satu halaman posting blog kemudian lihat diatas judulnya maka Breadcrumb Navigation sudah tampil pada blog anda. Mudah-mudahan dengan adanya Breadcrumb Navigation Pada Blog bisa meningkatkan SERP blog pada mesin pencari. Sebagai contoh lihatlah gambar dibawah ini yang merupakan Breadcrumb Navigation Blog Zona Klik.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<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>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<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>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
5. Simpan Template
Jika cara diatas telah dipraktekkan dengan benar lihat hasilnya pada blog anda dengan cara masuk ke salah satu halaman posting blog kemudian lihat diatas judulnya maka Breadcrumb Navigation sudah tampil pada blog anda. Mudah-mudahan dengan adanya Breadcrumb Navigation Pada Blog bisa meningkatkan SERP blog pada mesin pencari. Sebagai contoh lihatlah gambar dibawah ini yang merupakan Breadcrumb Navigation Blog Zona Klik.
Thanks for reading & sharing Tutorial Blog & Tips SEO
