Breaking News
Loading...
Senin, 06 Februari 2012

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

 

5 komentar:

  1. Sepertinya navigasi breadcumb ini tidak langsung terindex oleh Google, adakah cara mempercepatnya ?

    BalasHapus
  2. Saya juga sudah pasang navigasi breadcrumb ini, dan sudah terindeks Google, salam

    BalasHapus
  3. Saya sudah buat belum ya yang ini? Hmm cuman sering denger sampai lupa cek dan sudah belum dilakukan. ahaha, thanks infonya sob. Cek dulu ahh disearch engine

    BalasHapus
  4. boleh tanya: apa anda juga pakai script yang ini masalahnya saat saya coba browsing" tentang breadcrumb, script yang disuruh memasangkan itu banyak, apa yang ini juga bisa mas.. thanks

    BalasHapus
  5. @teknologikomputer9 : Untuk membuat Navigasi Breadcrumb yang dapat langsung terindeks oleh Google, silahkan anda menuju ke SINI Sama, itu blog aku juga .... happy blogging

    BalasHapus

==> Silahkan meninggalkan komentar, jangan OOT, No Spam, No SARA
==> Jangan berkomentar dengan modus Anonimous
==> Jangan promosi produk, No Pornografi, No link-aktif
==> Jika ingin mendapatkan backlink, gunakan modus Name/Url
==> Mohon maaf bila ada keterlambatan balasan komentar anda.

 
Toggle Footer
backtotop