Membuat breadcrumbs, label navigasi diatas posting

Breadcrumbs   Merupakan sebuah navigasi label yang biasanya terletak diatas posting sebuah blog yang berfungsi untuk memberikan info...


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....

COMMENTS

BLOGGER
Nama

Aluminium,4,Amdal,15,Arsitektur,63,Bahan bangunan,8,Bangunan Air,2,budaya indonesia,26,Denah Rumah,22,Galeri,25,Green house,6,Info sekilas,27,Interior,1,Irigasi,2,Jembatan,3,K3 konstruksi,4,Konservasi tanah,5,Konstruksi,48,Konstruksi Beton,15,Konstruksi kayu,38,Kuda kuda Baja,1,Kuda kuda kayu,4,Kusen,4,Lingkungan,15,Masjid,11,Mebelair,2,Menu navigasi,3,Opini,13,Pemberdayaan Masyarakat,7,Pendidikan,3,Peraturan,31,Pondasi,4,Profil Kusen,4,Property,46,RAB,28,Rumah adat,21,S E O,7,Sambungan Kayu,30,Sertifikasi,12,sipil,53,SNI,22,Software,2,Tangga,3,Tips trik blogger,27,Undang undang,12,Wisata,2,
ltr
item
Home Design and Ideas: Membuat breadcrumbs, label navigasi diatas posting
Membuat breadcrumbs, label navigasi diatas posting
http://4.bp.blogspot.com/-Al65rGA71LQ/VV81yFChijI/AAAAAAAAFJE/9jIxwxa_kyM/s640/label%2Bdiatas%2Bposting.bmp
http://4.bp.blogspot.com/-Al65rGA71LQ/VV81yFChijI/AAAAAAAAFJE/9jIxwxa_kyM/s72-c/label%2Bdiatas%2Bposting.bmp
Home Design and Ideas
https://www.hdesignideas.com/2015/05/membuat-breadcrumbs-label-navigasi.html
https://www.hdesignideas.com/
https://www.hdesignideas.com/
https://www.hdesignideas.com/2015/05/membuat-breadcrumbs-label-navigasi.html
true
2215255630784927830
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content