Cara Mudah Membuat Navigasi Breadcrumb Pada Blogspot Cara Mudah Membuat Navigasi Breadcrumb Pada Blogspot

Cara Mudah Membuat Navigasi Breadcrumb Pada Blogspot - Konon, Google sangat suka pada blog yang telah dipasang Navigasi Breadcrumb yang salah satu fungsinya untuk memudahkan pengunjung dalam menelusuri halaman blog anda. 

Pada dasarnya Navigasi Breadcrumb ini terpasang diatas postingan ketika postingan itu dibuka. Artinya Navigasi Breadcrumb ini tidak mengganggu tampilan halaman beranda dan halaman berikutnya sehingga keindahan blog anda tetap terjaga.

Navigasi Breadcrumb menampilkan tiga link dari blog anda yaitu : Home, Label post serta judul post yang sedang dibuka pengunjung. Lihat gambar dibawah ini :

Ada beberapa cara untuk menampilkan Navigrasi Breadcrumb, tapi karena hasilnya sama, admin hanya menampilkan satu cara, dengan harapan dapat anda terapkan pada blog kesayangan anda.

Ini langkah-langkahnya.

Masuk ke Blogger.
Masuk Rancangan bagian Edit HTML.
Kasih tanda cek pada Expand Template Widget.
Jangan lupa Backup dulu template anda jika takut gagal.
Copy kode dibawah ini dan paste tepat diatas kode ]]></b:skin>


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


Selanjutnya copy kode dibawah ini dan paste tepat dibawah kode <div class='post hentry'> atau cari kode ini <b:includable id='post' var='post'> Paste kode dibawah tepat dibawahnya.


<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'>Home</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 Template.
Lihat hasilnya (Buka salah satu postingan blog anda).
Selamat mencoba, semoga bermanfaat.