Cara Membuat Breadcrumb Pada Blog

Bagikan Artikel Ini :

Cara Pasang Breadcrumb Navigation - Cara pasang Navigasi Breadcrumb di blogspot supaya lebih SEO Friendly. Apa sih Breadcrumb itu ?? mungkin ada yang udah tau dan ada juga banyak temen - temen yang belum tau apa itu BreadCrumb? Kalau diartikan satu - satu artinya bisa saja di artikan sebagai "remah roti" tapi bukan itu arti sebenarnya dalam istilah blogger, Breadcrumb yang dimaksud disini adalah sebuah bantuan navigasi yang digunakan dalam user interface sehingga memudahkan user untuk menavigasi halaman web/blog. Istilah ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dalam sebuah dongeng populer.
Selain memudahkan pengunjung dalam menavigasi web/blog kita ternyata BreadCrumb juga di senangi robot Google yang mengcrawl halaman weblog. nah kalo berhubungan dengan robot google sudah pasti erat 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, sebagai contoh silahkan lihat tampilan SERP artikel dari TECHNOLOGY INFORMATION CENTER tentang Super SEO Friendly Blogger Template di bawah ini :

dari gambar diatas terlihat pada bagian yang diberi tanda panah warna merah itulah hasil indeks Google dari Navigasi Breadcrumb yang akan kita buat, biasanya pada bagian yang ditunjuk panah merah itu adalah URL postigan kita namun setelah menggunakan Navigasi Breadcrumb tampilannya lebih rapi dan cantik serta memudahkan user/pengunjung untuk melihat kategori artikel tersebut.
Lalu bagaimana Cara Membuat Breadcrumb Pada Blog tersebut?
Untuk Membuatnya silahkan temen - temen ikuti petunjuk di bawah ini :
1. Login ke blogger degan ID anda.
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML
4. klik Download Full Template and silahkan back up template anda lebih dulu. 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 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 Membuat Breadcrumb Pada Blog" ini dan bisa juga di lihat pada bagian halaman posting blog kita masing-masing,

thanks to:http://iptek-4u.blogspot.com/2012/03/cara-membuat-breadcrumb-pada-blog.html

TERIMAKASIH SUDAH BERKUNJUNG KE BLOG INI, SEMOGA ARTIKEL INI MENAMBAH WAWASAN & MEMBERIKAN MANFAAT BAGI KITA SEMUA YANG MEMBACANYA...JANGAN LUPA UNTUK SELALU BERKUNJUNG KEMBALI...KARENA MASIH BANYAK ARTIKEL MENARIK LAINNYA YANG MENUNGGU UNTUK DIBACA OLEH PARA SOBAT SEMUA.

SELURUH ISI BLOG INI BOLEH DI COPY-PASTE DENGAN SYARAT MENCANTUMKAN LINK SUMBER DARI BLOG INI ( JIKALAU SOBAT TIDAK KEBERATAN ) THANKS... ! 

ARTIKEL TERKAIT :