Membuat Menu Breadcrumb di blogspot

Aduh..sebenarnya sih dah ngantuk, tapi coba untuk posting satu lagi deh, semoga posting ini bermanfaat untuk yang membacanya, untuk posting kali ini saya akan sharing tentang cara membuat Menu Breadcrumb di Blogspot.

Tapi menu Breadcrumb kali ini akan memunculkan semua label yang di tautkan ke dalam postingan yang kita buat, sehingga memudahkan pengunjung blog menemukan label yang sesuai dengan postingan kita.

tertarik untuk membuatnya ? langsung aja ikuti langkah berikut :

1.  Login Blogger » Pilih Rancangan » Klik Tab Edit HTML » Centang Kotak Expend Widget


2.  Cari kode berikut mirip seperti:  <div class='post hentry'> 
 atau ketikan hentry pada search (Tekan F3 untuk membuka search.


3.  Copy kode berikut, dan simpan tepat di bawah kode <div class='post hentry'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family:Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuHmtyGMocFT3jfBO1Eyj8seHL7Ax4c-DFsbkO4d2tw1r6ynpWgj2BrXMl5dk9OcNbSzakvOymHT6chkojetKMvLYqcQjaJ8DmOpZbru4ZhMNHxy77-hGldvmaBBwdnVWX9hpSFY8dYc/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family:Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuHmtyGMocFT3jfBO1Eyj8seHL7Ax4c-DFsbkO4d2tw1r6ynpWgj2BrXMl5dk9OcNbSzakvOymHT6chkojetKMvLYqcQjaJ8DmOpZbru4ZhMNHxy77-hGldvmaBBwdnVWX9hpSFY8dYc/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

Jika sudah selesai simpan template dan lihatlah hasilnya...

Jika ingin menggunakan kotak (border) dalam breadcrumbseperti situs ini, tambahkan saja kode berikut ini, dan pastekan tepat di atas ]]></b:skin> :

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

Terakhir simpan dan lihatlah hasilnya, bagaimana ?

Blog kamu sekarang terlihat lebih profesional kan ? disamping dapat mempercantik tampilan blog menu Breadcrumb ini juga dapat membuat Blog SEO Friendly dengan kata lain Blog kita dapat mudah terindeks di Search Engine.

Walaupun menurut para pakar SEO menu Breadcrumb kita baru terindeks mesin pencari Google setelah kita memiliki page rank diatas 3. tapi ga ada salahnyakan sedia payung sebelum hujan..

Selamat mencoba.