Membuat Breadcrumbs (Menu Navigasi Diatas Postingan)

Hore, akhirnya aku berhasil pasang breadcrumbs diatas judul postingan. Seperti sebelumnya, kode-kode ini aku comot dari template lain yang baru aku download.

Breadcrumbs sendiri disebut sebagai salah satu teknik modifikasi agar blog lebih SEO-friendly. Bentuknya adalah menu navigasi yang terletak diatas postingan. Misalnya:

Home>>download>>Photoshop CS5 (Full Crack)

Menu navigasi ini memudahkan pengunjung untuk menelusuri isi lain dari blog melalui link label yang tertera pada menu breadcrumbs. Karena seperti namanya, konsep breadcrumbs seperti remah roti atau jejak yang memberitahukan sumber-sumber halaman. Dalam contoh diatas, sumber/labelnya adalah download.

Nah langsung aja, berikut langkah-langkahnya.

Masuk ke Blogger> Rancangan > Edit HTML. Lalu centang Expand Widget Templates.

Dengan bantuan CTRL+F, carilah kode ini:

]]></b:skin>

Kemudian letakkan kode berikut ini diatasnya:

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


Sekarang cari kode berikut ini:

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

Dan letakkan kode ini dibawahnya:

<b:include data='posts' name='breadcrumb'/>

Terakhir, cari kode dibawah ini:

<b:includable id='commentDeleteIcon' var='comment'>

Dan letakkan kode berikut diatasnya:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p class='breadcrumbs'>
<span class='labels'>
You are here: <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;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<p class='breadcrumbs'>
<span class='labels'>
You are here: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arquivos de <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
You are here: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; you are reading
<b:else/>
you are here: <a expr:href='data:blog.homepageUrl'>Home</a> &#187;reading <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Selesai. Simpan template, dan coba tampilkan sebuah postingan dari blog kamu.

Kamu juga bisa mengubah ketebalan dan warna garisnya dengan mengubah angka, jenis garis dan kode warnanya (yang diberi warna merah):

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

Semoga bermanfaat.

Have fun!