Cara pasang Navigasi Breadcrumb di blogspot

www.aziscs1.com - Breadcrumb dalam istilah Blogger adalah sebuah bantuan navigasi yang digunakan dalam user interface sehingga memudahkan user untuk menavigasi halaman web/blog. Selain mempermudah user dalam menavigasi web/blog kita selain itu juga di senangi robot Google yang mengcrawl halaman weblog. Breadcrumb masih ada kaitannya dengan SEO, terutama SEO onpage. Sebaiknya kita memasang kode Breadcrumb sedini mungkin supaya cepat di indeks 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 suatu website.

Breadcrumb biasanya terlihat seperti ini:

Home » Kategori/Tags/Archive » Artikel



Berikut ini adalah cara membuat breadcrumb di blogger.com/blogspot :

1. Login ke blogger degan ID anda.
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. Silahkan cari kode berikut pada template anda :

<div class='post hentry'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <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>

Simpan/save dan 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

Tweet

Azis Grafis

Assalamualaikum, “Saya merupakan seorang yang sangat tertarik dengan dunia Desain Grafis, Fotografi, Komputer dan Blogger. Oleh Karena itu saya sangat senang Sekali mempraktekkan dan berbagi apa yang sudah saya ketahui dan miliki kepada orang lain, sehingga menjadi sangat bermanfaat bagi saya sendiri maupun orang lain.”

Subscribe to receive free email updates: