Cara Memasang Navigasi Breadcrumb di Blogspot Pemula

SEO Onpage. Cara Memasang Navigasi Breadcrumb di Blogspot Pemula. Breadcrumb dalam istilah Blogger adalah sebuah bantuan navigasi yang digunakan dalam user interface untuk mempermudah para user menavigasi halaman web/blog kita.

Selain untuk mempermudah user dalam menavigasi web/blog kita, ada lagi satu keuntungannya yaitu juga di senangi robot Om Google yang mengcrawl halaman weblog.  

Breadcrumb masih ada kaitannya dengan SEO, terutama untuk SEO Onpage. Sebaiknya kita memasang kode Breadcrumb sedini mungkin supaya cepat di indeks si Om Google, hasilnya tampilan url posting blog kita akan lebih rapi dan cantik di tampilkan di SERP Google.

Breadcrumb biasanya muncul secara horizontal di bagian bawah judul artikel maupun di bagian atasnya. Breadcrumb menyediakan link untuk kembali ke tag halaman sebelumnya sehingga user atau pengunjung lebih mudah dalam menjelajahi web/blog kita.

Breadcrumb biasanya terlihat seperti ini:

Home » Kategori/Tags/Archive » Artikel Terkait

Cara Memasang Navigasi Breadcrumb di Blogspot Pemula : 

1. Login ke blogger  degan ID kita.

2. Klik Tata Letak / layout

3. Kemudian klik tab Edit HTML

4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.

5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

   

6. Cari kode :

]]></b:skin> 

7. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}

8. Kemudian cari kode berikut pada template kita :

<div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Ganti Dengan Kata Kunci Utama Blog</a> &#187; <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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

9. Copy lalu paste kode di bawah ini persis di bawah kode  
<div class='post hentry'>

Simpan atau save template, kemudian silahkan lihat hasilnya secara langsung di atas judul postingan "Cara Pasang Breadcrumb Blogspot" ini dan bisa juga di lihat pada bagian halaman posting blog kita masing-masing, maka hasilnya mirip dengan dengan gambar di bawah ini:

Style template seperti ini akan menambah seo friendly sebuah template, Selamat mencoba


Semoga Manfaat