Apakah pada waktu anda melakukan pencarian dan melihat-lihat suatu blog atau situs pernah mengalami ketersesatan? Maksud saya tersesat disini adalah jika kita berada pada sebuah blog, situs atau sejenisnya kita tidak tahu berada di halaman mana kita berada. Ini disebabkan blog atau situs tersebut misalnya tidak memiliki penunjuk arah (semacam navigasi seperti "home") pada halaman yang anda telusuri melalui label yang tercantum pada blog atau situs tersebut. Contohnya adalah anda ingin kembali pada "home" maupun "label" untuk kembali melakukan pencarian pada blog atau situs tersebut namun tidak ada penunjuk yang mengarah untuk menuju kesana. Lalu apa yang harus anda lakukan pada blog atau situs anda?

Nah, solusi yang tepat untuk mengatasi hal tersebut diatas adalah dengan cara menambahkan The Breadcrumb Trail diatas postingan sehingga memudahkan user untuk melakukan navigasi dalam melakukan pencarian maupun kembali pada halaman utama blog maupun situs kita. Dengan menambahkan breadcrumb, user bisa memilih dengan meng-klik "label" jika ingin kembali pada halaman label maupun dengan meng-klik "home" jika ingin kembali ke halaman utama. Yang lebih penting lagi yaitu user mengetahui keberadaannya di halaman blog atau situs yang kita miliki sehingga tidak tersesat seperti contoh diatas. Jika anda ingin menambahkan widget ini pada template anda, ikuti saja langkah - langkah berikut ini.

Langkah - langkah untuk menambahkan breadcrumb trail ini:

1. Anda tuju ke Layout>Edit HTML dan check box Expand Widget

2. Cari kode seperti gambar dibawah ini dan block kodenya, pastikan kode tersebut sama (lihat gambar dibawah ini):

Setelah itu ganti kode yang sudah diblock dengan kode dibawah ini:

<b:includable id=’breadcrumbs’ var=’post’>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond=’data:blog.pageType == "item"’>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<b:if cond=’data:post.labels’>
You are here:
<a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a> &gt;
<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:if cond=’data:post.title’>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

3. Setelah itu, cari kode ini <b:if cond=’data:post.dateHeader’> dan tambahkan diatasnya kode ini <b:include data=’post’ name=’breadcrumbs’/>, contohnya pada gambar dibawah ini:

4. Lalu tambahkan CSS kode dibawah ini dan taruh diatas ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Contohnya pada gambar dibawah:

Anda bisa memodifikasi untuk padding yang dicetak tebal untuk menentukan expand/shorten breadcrumb trail jika anda memasang diatas atau dibawah postingan.

5. Setelah itu save template anda dan hasilnya seperti dibawah ini:

Related Posts by Categories