Cara Membuat Navigasi Breadcrumb

Navigasi Breadcrumb atau terkenal dengan bahasa Inggrisnya yaitu Breadcrumb Navigation merupakan navigasi yang terlihat cukup simple, tetapi memiliki kegunaan yang banyak di antaranya yaitu memudahkan pengunjung blog Anda mengetahui keberadaannya.

Contoh navigasi breadcrumb bisa Anda lihat di atas judul tutorial ini. Itu merupakan navigasi breadcrumb yang biasanya Anda temui pada beberapa blog atau website termasuk blog Kumpulan Tutorial Ngeblog.




Cara membuatnya pun cukup mudah. Silakan ikuti langkah-langkah membuat navigasi breadcrumb berikut ini

Langkah 1
Login ke akun Blogger milik anda > Tata Letak >Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Catatan: Biasakan membackup template blog Anda sebelum mengedit HTML

Langkah 2
Beri tanda centang pada Expand Widget Templates. Copy kode CSS di bawah ini lalu paste tepat di atas kode ]]></b:skin>

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

Ganti kata yang berwarna merah dengan kode warna sesuai keinginan Anda
Ganti kata yang berwarna biru dengan ukuran font sesuai keinginan Anda

Langkah 3
Cari kode <div class='post hentry uncustomized-post-template'>
Copy kode di bawah ini lalu paste tepat di bawah kode <div class='post hentry uncustomized-post-template'>

<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><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>

Ganti kata yang berwarna merah sesuai dengan keinginan Anda

Langkah 4
Klik tombol Simpan. Setelah tersimpan, buka salah satu halaman artikel pada blog Anda.
Navigasi Breradcrumb telah terpasang tepat di atas judul artikel blog Anda.

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Tool Gadget. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Tool Gadget dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Blog Ryan pada tanggal Friday, 2 April 2010