NAVIGASI BREADCUMB, CARA MEMBUATNYA - 1

Berbagai pertanyaanya yang muncul saat kita mendengar istilah NAVIGASI BREADCUMB ini, "Apa sih maksudnya ?". Lalu akan muncul lagi pertanyaan, "Apa kegunaannya atau fungsinya ?". Ceritanya begini, navigasi breadcumb ini pada dasarnya adalah merupakan suatu bentuk program navigasi konten (isi) web/blog yang kita miliki, yang disusun sedemikian rupa sehingga dapat membantu pengunjung (blog kita tentunya) agar dapat menjelajahi seluruh isi konten blog yang kita miliki ini. Secara singkat navigasi breadcumb dapat diartikan sebagai program "kompas navigator blog" (istilah saya sendiri ini).

Contoh hasil daripada navigasi-breadcumb ini adalah seperti gambar di bawah ini  :

Nah, setelah melalui tahapan penjelasan, maka berikut ini adalah tahapan atau cara membuatnya  :

Log-in ke blog anda, rancangan/disain, edit HTML (centang expand template widget), lalu carilah deskripsi seperti ini  (untuk lebih cepat, gunakan tombol crtl-F) :  <b:if cond='data:post.title'>

Jika terdapat dua kode, maka pilihlah kode yang pertama kali, selanjutnya letakkan script di bawah ini tepat di bawah kode tersebut di atas. Inilah scriptnya  :

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

Langkah selanjutnya adalah (dengan metode yang sama) carilah kode berikut ini   ]]></b:skin>

Selanjutnya copykan script di bawah ini tepat di atas kode tersebut, dan inilah scriptnya  :

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

Setelah itu simpanlah template anda, dan selesai sudah.

Untuk informasi lebih lanjut perihal Navigasi Breadcumb ini, dapat anda temukan DI SINI.