Cara Menambahkan "Breadcrumbs" Si Pelacak Navigasi

29Des
2009
English | Indonesia

Hai semua, seneng banget rasanya bisa corat coret dinding blog ini. Habis nonton film 2012 di kompie, eh ternyata macet ditengah jalan trus dah ngga mau dinyalain lagi filmnya. Yowis ngeblog aja! Ya tho?

Malem ini topik yang akan dibawakan adalah masalah Utak-Atik Blog, yaitu gimana sih caranya nambahin "Breadcrumbs" kedalam blogger blog.


Apa itu Breadcrumbs

Breadcrumbs nama yang cukup aneh -menurutku- mengingat kegunaannya itu untuk memberikan atau menunjukkan kita ini baru ada dimana dalam sebuah web, mungkin nama kerennya penunjuk jalan. Ya, jadi ngga bakal ada nama kesasar waktu mau balik lagi ke artikel itu. Tinggal klik..klik..dah nyampe ke tempat tujuan.

Jadi breadcrumbs itu yang mana sih? Ok ok..


Di atas itu tampilan breadcrumbs waktu ada di halaman depan blog ini. Nah kalo yang ini udah masuk kedalam salah satu artikel yang judulnya Cara Membuat Blog Translator.


Kalo sekarang, mungkin tulisannya bakal jadi gini kali ya,
Home >> Utak Atik Blog >> Tambahkan "Breadcrumbs" Pelacak Navigasi
Jadi cara nambahinnya lumayan gampang, cuma mungkin ada beberapa jenis template yang ngga compatible dengan code ini.

PertamaX masuk ke dalam HTML editor di Blogger blog.

Langkah Kedua, cari code ini
<b:include data='top' name='status-message'/>
Yang Ketiga, tindih code doatas dengan code dibawah ini
<!-- Breadcrumbs code -->
<div id='places'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
      <div class='breadcrumbs'>
Selamat Datang di <data:blog.title/>
</div>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='breadcrumbs'>

          <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 == &quot;true&quot;'> &#187;
              <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
            </b:if>
 &#187; <span class='post-title entry-title'><data:post.title/></span>
      </b:loop>
    </b:if>
  </b:loop>
        
      </div>
  </b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
  <b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>
<!-- Breadcrumbs berakhir -->
Untuk mengganti kata sambutan, bisa dengan mengubah kata Selamat datang di dengan kata-kata kesukaan, trus kalau mau pengubahan lebih lanjut bisa dengan manghapus <data:blog.title/> soalnya code ini yang memanggil judul blog dengan otomatis.

Ok, langkah Keempat
Cari code </b:skin>, tepat sebelumnya paste code ini
 #places {
  border: 1px solid #000000;
  padding: 5px 15px;
  margin: 10px 0;
  line-height: 1.4em;
}
Kalu ngga suka sama warna bordernya, item, bisa diganti dengan code warna yang lain.

Feedback

Udah pake breadcrumbs ini, gimana? Berhasil kan?! Yoyoi, kalo gitu jangan lupa feedback nya ya! Tulisin aja di form komentar dibawah ini. Good Luck!

0 comments:

Sobat, Apa pendapatmu?