Cara Membuat Navigasi Breadcrumb di Blog.Sobat Darmanto,agak lama juga yah Catatan saya ini tidak membuat tutorial blog.Nah pada catatan saya kali ini,saya akan berbagi catatan mengenai Cara membuat navigasi breadcrumb di blog.Membuat navigasi breadcrumb adalah salah satu navigasi yang saat ini banyak dipakai oleh hampir semua blog maupun website.Keberadaan Navigasi breadcrumb yang digunakan sebagai ‘user interface’ yang memungkinkan pengunjung dapat mengetahui halaman artikel yang sedang mereka baca.Biasanya Navigasi breadcrumb berbentuk tulisan/link yg menjelaskan posisi dan keberadaan sebuah artikel tetapi ada juga yang berbentuk gambar .Navigasi breadcrumb biasanya terdiri dari Halaman depan, Label/Kategori dan Isi artikel dan biasnya dipisahkan dengan tanda >> atau tanda >.Contoh navigasinya seperti tulisan dibawah ini::
Halaman depan > Label/Kategori > Isi Artikel.
Bagian Halaman depan dan Label akan dpasang link yg sebagai tombol kembali supaya memudahkan pengunjung blog dalam memilih Artikel yang lain.Ok sobat Darmanto semua,yok langsung saja saya bagikan catatan Cara membuat navigasi breadcrumb diblog sebagai berikut ini.Langkah yang pertama adalah:
1.Login ke dasbor blogger
2.Klik Rancangan
3.Lalu pilih Edit HTML
4.Dan jangan lupa Expand Widget Templates
2.Klik Rancangan
3.Lalu pilih Edit HTML
4.Dan jangan lupa Expand Widget Templates
Copy kode CSS dibawah ini dan pastekan sebelum kode ]]></b:skin>
#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:1px dotted #CCCCCC;Setelah itu cari kode <b:if cond=’data:post.title’> dan pastekan kode berikut ini diatasnya.Bila ada dua kode,moke pastekan saja di kode yang pertama:
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:1px dotted #CCCCCC;Setelah itu cari kode <b:if cond=’data:post.title’> dan pastekan kode berikut ini diatasnya.Bila ada dua kode,moke pastekan saja di kode yang pertama:
<b:if cond=’data:blog.homepageUrl == data:blog.url’> <b:else/> <b:if cond=’data:blog.pageType == "item"’> <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 != "true"’> , </b:if> </b:loop> </b:if> > <data:post.title/></div> </b:if> </b:if>
· Terakhir lakukan pratinjau dulu,bila berhasil maka simpan template.Ok sobat semua,itulah catatan saya mengenai Cara membuat navigasi breadcrumb di blog.Semoga berhasil dan bermanfaat.
