Trik Membuat Menu Breadcrumb Pada Blogger

Breadcrumb adalah navigasi penting untuk meningkatkan kualitas SEO blog profesional anda. Google akan membaca keberadaan menu breadcrumb ini dan akan ditampilakan dalam hasil pencarian Google. Lihat contoh di bawah.

Namun sayang, template bawaan blogger kebanyakan belum menyediakan fasilitas crusial ini (entah mengapa). Tapi jangan khawatir karena saya akan membantu anda untuk menerapkan menu breadcrumb ini di blog anda. Simak langkah-langkah berikut :

1. Masuk ke akun blogger, lalu klik Template >> Edit HTML


2. Temukan kode <b:include data='top' name='status-message'/>, gunakan Ctrl+F untuk mempermudah pencarian


3. Ganti kode diatas dengan kode dibawah



<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/> 



4. Kemudian cari lagi kode <b:includable id='main' var='top'> dan ganti dengan kode di bawah



<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
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>
</b:loop><b:else/>
&#187; Uncategorized
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span></p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</span></p></b:if></b:if></b:if></b:if>
</b:includable>
<b:includable id='main' var='top'>



5. Langkah terakhir temukan kode ]]></b:skin> lalu masukkan kode dibawah di atas kode tersebut



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



6. Simpan template anda