Membuat breadcrumbs, label navigasi diatas posting


Breadcrumbs
 Merupakan sebuah navigasi label yang biasanya terletak diatas posting sebuah blog yang berfungsi untuk memberikan informasi peta atau navigasi label posting yang dibaca oleh para pembaca di blog, sehingga akan lebih memudahkan  pembaca dalam mencari artikel yang berhubungan dengan label artikel yang sedang dia baca.
Contoh navigasi label atau breadcrumb diatas posting biasanya akan berbentuk link seperti ini:
  • Home > label > judul posting 
Anda dapat melihat contoh gambarnya di gambar pertama posting ini.
Karena di blogger.com belum menyediakan fasilitas ini,maka kali ini saya akan share caranya.Caranya mudah, kita hanya perlu menambahkan beberapa kode di template blog.

Berikut cara membuat navigasi label (breadcrumb) diatas judul posting blog
  • Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda dengan menggunakan akun blogger yang anda miliki.
  • Setelah masuk ke halaman dashboard, silahkan anda klik nama blog yang anda miliki (apabila anda memiliki blog lebih dari 1).
  • Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.
membuat breadcrumbs diatas judul posting blog

  • Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.
membuat breadcrumbs diatas judul posting blog

  • Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode ]]></b:skin>. Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
  • Masukkan kode berikut ini tepat diatas ]]></b:skin>.


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

  • Berikutnya anda cari kode <b:includable id='post' var='post'> dan masukkan kode berikut ini tepat dibawahnya.


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


8.Terakhir,silahkan anda klik simpan atau save.

Untuk melihat hasilnya,anda bisa mengunjungi halaman posting anda di blog, maka anda akan lihat navigasi label (breadcrumbs) telah muncul diatas judul posting blog anda.

Demikianlah cara membuat cara membuat breadcrumbs diatas judul posting blog, apabila masih ada kekurangan atau kode alternatif lainnya maka silahkan memberikan komentar, karena komentar anda akan menjadi sesuatu hal yang amat membantu bagi saya.
Terima kasih telah berkunjung.
semoga bermanfaat....

Komentar

Berita terbaru

Postingan populer dari blog ini

Memahami Mutu Beton fc (Mpa) dan Mutu Beton K (kg/cm2)

Menghitung Volume Besi per-m3 beton bertulang

Bagian bagian Atap Rangka Kayu untuk Rumah Tinggal Sederhana

Menentukan ukuran Tangga dan Anak Tangga untuk bangunan bertingkat