Apa itu Breadcrumb-navigation ?

Artikel ini telah dibaca 3389 kali.

Mungkin diantara rekan bloger ada yang belum tahu apa itu breadcrumb navigation. Nah, kali ini saya sharing mengenai breadcrumb navigation yang bisa kita gunakan untuk mempermudah navigasi blog kita.

Apa itu Breadcrumb-navigation ?

Breadcrumb navigation adalah suatu bentuk navigasi konten blog kita sedemikian rupa sehingga bisa membantu pengunjung lebih mudah untuk menjelajah konten blog. (Yang ini definisi saya sendiri. Sumpah!)

Biasanya navigasi breadcrumb ini diletakkan di atas judul artikel.

Kalau bingung coba lihat screenshot berikut ini:

breadcrum

Lihat yang ditunjukkan panah pada gambar di atas. Itulah yang namanya breadcrumb navigation.

Sebenarnya kita sering melihat navigasi seperti itu jika menggunakan Win 7. Lihat screenshot di bawah. Pada menu bar Win 7 juga terdapat navigasi semacam itu. Kita bisa memilih mau masuk folder yang mana hanya dengan mengklik tanda segitiga kecil tersebut.

navigasi

Kalau sudah paham dan pingin juga memasangnya silahkan lanjutkan.

Cara memasang breadcrumb navigation di blogspot

Lantas bagaimana cara memasangnya? Gampang kok. Silahkan masuk ke akun blogger Anda, pilih | Layout | Edit HTML | dan centang |Expand widget template|. Jangan lupa backup dulu.

  • Temukan kode ini

]]></b:skin>

  • Copy dan paste kode berikut ini persis di atas kode ]]></b:skin> tersebut

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

  • Klik |Save template|

Jika sudah, langkah berikutnya adalah:

  • Temukan kode berikut ini

<div class=’post hentry uncustomized-post-template’>

jika tidak dapat menemukan kode tersebut boleh juga cari kode yang ini

<div class=’post hentry’>

  • Copy dan pastekan kode ini di bawah kode <div class=’post hentry uncustomized-post-template’> atau <div class=’post hentry’> (tergantung mana kode yang Anda temukan, salah satu dari kode tersebut)

<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’breadcrumbs’>
Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> »
<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> » <data:post.title/>
</div>
</b:if>
</b:if>

  • Silahkan |Save|

Sekarang bukalah salah satu artikel di blog Anda, dan amatilah di atas judul artikel tersebut Be right back

Blogger Labels: memasang breadcrumb di blogspot,memasang breadcrumb,Breadcrumb navigation,navigasi blog

Tags: bloger breadcrumb lantas navigasi panah pingin win 7

author
Dosso Sang Isahi adalah mantan guru, sekarang berprofesi sebagai networker. Saat ini mengelola beberapa bisnis online, juga aktif dalam bidang sosial media marketing. Pria yang senang belajar hal yang berbau teknis dan IT ini bersama keluarga kecilnya tinggal di Sidoarjo, sedang menikmati kebebasan karier yang telah dicapainya.

Related Post "Apa itu Breadcrumb-navigation ?"

Cara mereset password WordPress dari cPanel
Saya lagi suntuk berat. Salah satu blog
Habis Google Panda terbitlah Google Pinguin
Google PandaSetelah dulu Google merilis update algoritma
Cara mudah mereset password WordPress
Jika Anda lupa username dan password login
Mengenal berbagai jenis hosting
Sebagai seorang blogger atau pebisnis online, ada