Thursday, August 4, 2011

Cara Membuat Navigasi Breadcrumbs

Membuat Navigasi Breadcrumbs. Suatu tutorial yang menurut saya ini memang penting dan bisa juga untuk bagus-bagusin blog kita. Dengan cara ini pula, kita bisa mendapatkan atau menambah kekuatan dengan menambah kategori pada Indeks Search Engine. Sehingga kita bisa memberikan efek tersendiri pada posting seperti penambahan kekuatan keyword atau Search Engine. Untuk contoh lebih jelasnya bisa lihat diatas judul Posting saya ini kawan. Dan untuk mempercepatnya mari kita langsung saja membuat Membuat Navigasi Breadcrumbs sebagai berikut.
Breadcrumbs Navigation

Mungkin Anda masih bertanya-tanya Navigasi Breadcrumbs itu apa? Biar tidak merasa bingung coba baca pengertian dari wikipedia.org ( butuh bantuan?)



Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.
Contohnya Home page > Tricks > Blogging > Cara Membuat Navigasi Breadcrumbs

Cara pemasangannya pun seperti ini kawan :

1. Login ke Blogger kawan.

2. klik Rancangan klik Edit HTML.

3. Beri tanda centang pada kotak di samping tulisan Expand Template Widget.

4. Lalu sobat cari kode ini. Agar lebih mudah dengan menggunakan Ctrl F atau F3.


]]></b:skin>


5. Kalau sudah ketemu copy kode dibawah ini dan paste diatasnya.



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



6. Kemudian cari lah kode seperti ini.


  <div class='post hentry'>

8. Jika sudah ketemu mencarinya, maka copy kode berikut dan paste dibawahnya.


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browser &#187; <a expr:href='data:blog.homepageUrl'>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 != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>




9. Silahkan di pratinjau dulu saja apabila teman-teman belum yakin, dan agar mengantisipasi terjadinya kesalahan dalam pemasangan kode Membuat Navigasi Breadcrumbs.


10. Selesai sudah cara membuat Membuat Navigasi Breadcrumbs kawan 

Semoga Trik Cara Membuat Navigasi Breadcrumbs ini bermanfaat buat kawan blogger semuanya

All tricks and tips

No comments:

Post a Comment