Cara Membuat Navigasi Breadcrumb di Blogspot, pada postingan blog inspirasi sebelumnya sudah dijelaskan mengenai apa itu breadcrumb navigation, apa fungsi breadcrumb navigation, dan apa manfaat breadcrumb navigation untuk SEO. Jadi kali ini blog inspirasi tinggal melanjutkan dan langsung saja menuju pada Cara Membuat/Memasang Navigasi Breadcrumb pada Blogspot.
Mengenai cara memasang navigasi breadcrumb pada blogspot saya rasa sudah banyak sahabat blogger lain yang membahas hal tersebut dan caranya pun terbilang hampir sama.
Nah, pada postingan ini blogger pemula blog inspirasi akan coba share tentang cara membuat breadcrumb navigation yang sedikit berbeda dengan yang sudah dijelaskan oleh sahabat blogger lain karena menurut sumbernya kode ini sudah sedikit dimodifikasi agar search engine Google lebih mudah menampilkannya pada hasil pencarian.
Untuk membuat navigasi breadcrumb, ikuti semua petunjuk di bawah ini:
- Login blogger
- Rancangan, Edit Html, dan jangan lupa beri tanda centang (checklist) pada kotak kecil Expand Template Widget
- Setelah itu cari kode di bawah ini :
<b:include data='top' name='status-message'/>
- Setelah kode di atas ketemu, lalu copy kode di bawah ini dan paste tepat di atasnya/sebelum kode pada nomor 3 tersebut.
<b:include data='posts' name='breadcrumb'/>
- Setelah mempaste kode di atas, sekarang cari lagi kode di bawah ini :
<b:includable id='main' var='top'>
- Setelah ketemu, lalu copy lagi kode di bawah ini dan paste tepat di atasnya/sebelum kode pada nomor 5 tersebut.
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'>; » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable>
Catatan: Kode di atas akan berfungsi pada label/kategori terakhir yang telah sahabat buat, jika sahabat ingin mengaktifkan breadcrumb pada semua label/kategori sahabat tinggal menghapus saja 2 kode yang berwarna kuning di atas
- Selanjutnya cari lagi kode ]]></b:skin>
- Setelah ketemu, copy kode di bawah ini dan paste tepat di atas/sebelum kode ]]></b:skin> tersebut.
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; }
- Save/simpan template, dan selesai sudah.
Sekarang lihat hasilnya, jika sahabat blogger berhasil maka di atas judul posting sahabat sudah muncul breadcrumb tersebut.
Selanjutnya untuk melihat hasilnya apakah breadcrumb sahabat bisa terlihat pada search engine Google, silahkan sahabat test pada alamat di bawah ini:
http://www.google.com/webmasters/tools/richsnippets
Masukkan salah satu url postingan sahabat dan klik tombol Preview:
Jika sahabat blogger berhasil maka di bawah judul postingan pada hasil tes tersebut breadcrumb akan muncul dan akan terlihat seperti itu juga pada hasil pencarian Google.
Demikian sampai disini dulu posting blog inpirasi kali ini, selamat mencoba dan semoga berhasil.
salam hangat dari blogger pemula blog inspirasi
Jika menurut sahabat blogger artikel ini bermanfaat, mohon luangkan waktu beberapa detik saja untuk memberikan like, +1, atau tweet. terima kasih sebelumnya. Dan jangan lupa juga untuk meninggalkan komentar.
Source Code = http://hoctrointro.blogspot.com/
