Cara tepat pasang menu breadcrumbs
Cara tepat pasang menu breadcrumbs. Breadcrumbs adalah menu navigasi yang ada diatas sebuah posting atau artikel. Lihat gambar di atas artikel ini! Tulisan saya beri kotak merah itulah yang di sebut menu breadcrumbs,
Selain memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, menu breadcrumbs juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google.
Dalam memasang menu breadcrumbs pada template blogspot diperlukan ketelitian. Bukan itu saja, kita harus pandai-pandai mencocokan kode dengan template kita. Suatu saat anda ingin memasang menu breadcrumbs pada blog anda dengan mencari artikel yang isinya petunjuk memasang menu breadcrumbs. Tetapi setelah mengikuti petunjuknya ternyata tidak muncul di atas postingan anda (biasanya bagi pemula).
Coba anda ketikkan kata kunci cara memasang menu breadcrumbs di mbah google, di sana akan tampil puluhan ribu artikel yang memuat tulisan tersebut. Tetapi, saya yakin belum tentu setiap artikel tersebut kodenya pas untuk template anda.
Nah untuk itu, sebelum anda mencoba memasang menu breadcrumbs anda harus membackup dulu template anda. Jadi jika satu kode yang anda pasang belum berhasil anda dapat mengembalikan template backupan anda. Ingat, anda harus teliti, karena satu huruf saja anda keliru, maka menu breadcrumbs tak akan muncul di atas postingan anda.
Bagi anda yang templatenya seperti punya saya, untuk memasangnya sebagai berikut:
1. Buka Blogger. Masuk ke menu Design -> Edit HTML
2. Beri centang pada 'Expand Widget Templates'.
3. Setelah itu, cari kode <b:if cond='data:post.title'>
4. Letakkan kode di bawah ini dibawah kode no. 3 tersebut:
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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/>
</div>
</b:if>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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/>
</div>
</b:if>
5. Selanjutnya cari kode ]]></b:skin>
6. Letakkan kode css berikut diatasnya
.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
7. Simpan template anda, selesai.
Catatan: Menu breadcrumbs tidak akan muncul pada URL halaman utama anda, tetapi hanya muncul dari setiap postingan yang anda buka.
Untuk mengecek sudahkah menu breadcrumbs sukses anda pasang, coba buka salah satu judul postingan anda.
Selamat mencoba
Selamat mencoba
Komentar
Posting Komentar