Cara Membuat Menu Navigasi Breadcrumb

Kali ini saya akan berbagi tips untuk blog anda, setelah Mas Adhie memposting cara mempercepat loading blog, kali ini saya akan posting cara membuat menu breadcrumb. Sudah banyak blogger yang menggunakan menu breadcrumb ini, setelah saya browsing dan melihat-lihat di beberapa website dan mencari tahu tentang apa itu breadcrumb, ternyata breadcrumb adalah sebaris tautan atau navigasi yang memungkinkan pengunjung untuk kembali ke bagian sebelumnya atau ke laman dasar dari suatu blog.

Pengertian Breadcrumb menurut situs resmi Google adalah sebagai berikut:

Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat.

Menurut Jacob Nielsen, jika ditinjau dari kegunaannya menu breadcrumb memiliki beberapa fungsi yaitu :

1. Menunjukkan lokasi atau path dari halaman web yang sekarang sedang dikunjungi, relatif terhadap struktur halaman diatasnya
2. Menyediakan fitur one-click acces ke level halaman web diatasnya sekaligus menghindari user tersesat karena terlalu dalam menjelajahi sebuah website/blog.

Untuk lebih jelasnya berikut ini adalah sedikit penjelasan tentang fomat breadcrumbs :

Home > Tutorial Wordpress > Cara merubah halaman login wordpress

( jika anda sedang dalam halaman yang berjudul  Cara merubah halaman login wordpress  dalam kategori Tutorial Wordpress)

Untuk langkah-langkah membuat menu breadcumb bisa dilihat pada tutorial dibawah ini :

1. Login ke akun blogger anda > Template > kemudian klik Edit HTML kemudian jika ada pernyataan klik Lanjutkan.

2. Terlebih dahulu backup template anda, untuk memudahkan Ctrl+A copy di notepad++ atau editor lainnya. Centang pada Expand Template Widget

3. Cari kode dibawah ini untuk memudahkan pencarian tekan Ctrl+F :

<div class='post hentry'>

Jika tidak ditemukan cari kode berikut ini :

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

4. Jika sudah ketemu silahkan paste kode dibawah ini tepat dibawah salah satu kode pada nomor 3

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"> <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop="url"><span itemprop="title"><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if> </b:loop> </b:if> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title"><data:post.title/> </span></span></div> </b:if></b:if>

5. Kemudian cari kode </b:skin> tambahkan kode CSS berikut :

.breadcrumbs{padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height:1.4em;}

6. Simpan template anda dan lihat perubahannya.

Sekian dulu postingan Mas Adhie tentang bagaimana cara membuat menu navigasi breadcrumb semoga bermanfaat dan selamat mencoba :)