Membuat Navigasi Breadcrumb Blogspot

Navigasi breadcrumb atau breadcrumb navigation adalah sebaris link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat. Namun saat ini penempatan breadcrumb lebih sering digunakan pada bagian atas halaman artikel posting. Urutan link breadcrumb dimulai dari home (homepage) dan diakhiri dengan judul artikel posting yang sedang dibaca. Contohnya: Browse » Home » SEO » Membuat Navigasi Breadcrumb Blogspot. Silahkan melihat [Demo Breadcrumb Navigation]

Saya tertarik dengan breadcrumb yang tertulis pada Google's Search Engine Optimization Starter Guide. Karena google mengatakan demikian dan saya masih menjadi penggunanya hingga saat ini, maka dengan senang hati saya praktekkan. Setelah mencari dan mencari akhirnya ketemu juga cara membuat navigasi breadcrumb untuk blogspot pada tulisan Kang Rohman How To Make "Breadcrumb-Navigation" In Blogger. Untuk lebih mudahnya apa itu breadcrumb silahkan melihat gambar berikut:

Ikuti langkah berikut:
1. Login blogger dengan ID kamu » Klik Tata Letak » Edit HTML » beri tanda centang pada Expand Template Widget » Download Template Lengkap untuk mem-backup template blog.

2. Carilah kode ]]></b:skin> agar lebih mudah tekan kebor Ctrl F atau F3 maka akan muncul tools pencarian (mozilla). Copy dan paste kode di bawah ini tepat di atas kode tadi.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

3. Carilah kode berikut pada template kamu
<div class='post hentry uncustomized-post-template'>
Copy dan paste kode berikut tepat di bawah kode tadi.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

4. Klik Simpan Template dan tunggulah beberapa saat hingga selesai.
5. Lihat blog kamu dan coba klik satu judul artikel dan lihat hasilnya.
6. Selesai.

Happy blogging.

Related Post:

Trik Blogspot

• Menambahkan Image Pada Judul Posting
• Mengganti Pager Link Blogger Dengan Icon
• Klik Label Tampil Hanya Judul Posting Update
• Klik Label Tampil Hanya Judul Posting
• Menambahkan Icon Pada Label Dan Link Sidebar
• Mengganti Tanggal Dengan Icon Kalender
• Menghilangkan Icon QuickEdit (Tang dan Obeng)
• Area Sidebar Dalam Kotak Terpisah
• Area Komentar Dalam Kotak Terpisah
• Area Posting Dalam Kotak Terpisah
• Background Warna Pada Teks Posting
• Modifikasi Pesan Pengantar Formulir Komentar
• Beda Tampilan Komentar Pemilik Blog
• Nomor Urut Komentar (Numbering Comment) Blogger
• Pasang Emoticon Di Atas Kotak Komentar
• Membuat Blockquote Dan Modifikasi Blockquote
• Masalah Pada Verifikasi Kotak Komentar
• Membuat Teks Berkedip Blink Text
• Membuat Horizontal Navigasi Blogger
• Avatar Profil Komentar Blogger Update
• Latar Belakang Teks Dengan Efek Stabilo
• Menggunakan Gambar Untuk Latar Belakang Blog
• Pasang Strip-Ad Seperti Navbar Blogger
• Menghilangkan Border Pada Image Posting
• Modifikasi Border Photo Profil Blogger

or or