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.
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.
- Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.
- 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 ==
"item"'> <div class='breadcrumbs'><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 != "true"'> , </b:if>
</b:loop> </b:if> > <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
Posting Komentar
Note :
. Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
. Terima kasih komentarnya...
. Semoga Bermanfaat...