Memasang Blogger Breadcrumb-Navigation di Blogspot Bagian 2

Tweet

Tutorial membuat navigasi menu breadcrumbs sebelumnya sudah saya uraikan disana, silahkan baca-baca sebelum kita lanjutkan cara membuat breadcrumb-navigation di blogger bagian 2, untuk alternatif cara memasang breadcrumb navigation di blogger.

Pada artikel sebelumnya yang bisa di baca di Memasang Blogger Breadcrumb-Navigation di Blogspot Bagian 1 sudah saya jelaskan, apa fungsi dan kegunaan serta keuntungan memasang navigasi menu breadcrumbs pada blogger. Untuk tutorial kali ini, langkah-langkah memasang breadcrumbs tidak berbeda jauh dengan sebelumnya, hanya pada penempatannya saja.

Oke.. langsung saja berikut langkah-langkah memasang blogger breadcrumb-navigation di blogspot bagian 2. Silahkan login ke blogger anda, dan masuk pada "Edit HTML". dan cari kode ]]></b:skin> kemudian paste kode CSS dibawah ini persis diatasnya. Untuk memudahkan anda dalam pencarian, tekan CTRL+F dan ketikan kode ]]></b:skin>.

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

Setelah kode CSS diatas terpasang, silahkan simpan template anda. Masih diarea "Edit HTML" centang pada "Expand Widget Templates", seperti gambar dibawah ini.


Jika sebelumnya kita memasang kodenya di bawah <div class='post hentry uncustomized-post-template'>, untuk alternatif lain membuat breadcrumb navigation di blogspot silahkan cari kode <b:include data='top' name='status-message'/> yang dibawahnya terdapat kode <data:adStart/>. Karena kode yang seperti ini ada yang sama, jadi harus persis seperti yang saya sarankan.

Kemudian copy kode berikut tepat dibawah kode <b:include data='top' name='status-message'/>.

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

Sehingga kodenya menjadi seperti ini

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

Setelah itu silahkan cari kode <b:includable id='main' var='top'> dan tambahkan kode dibawah ini tepat diatasnya.

<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 == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
»</b:if>
<span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Pastikan semua kode terpasang dengan benar, kemudian silahkan simpan template anda dan buka salah satu artikel untuk melihat hasil dari tutorial membuat navigasi menu breadcrumbs bagian 2. Semoga bermanfaat ^_^