Cara Membuat Menu Navigasi Breadcrumb di Blog
Membuat menu navigasi berurutan di atas artikel posting
atau istilahnya disebut breadcrumb, Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini. merupakan cara efektif untuk
memberikan kemudahan pengunjung dalam melihat kategori posting suatu
blog. Untuk membuatnya kita bisa menggunakan script ciptaan hoctro di hoctro.blogspot.com
Langkah demi langkah q jalani demi Membuat Breadcrumb Pada Blogger
hehee... :)
Pertama,pastikan sobat sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard, lalu pilih Tata Letak dan kemudian pilih Edit HTML, jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):
Kemudian,cari lagi kode berikut:
Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
Nah,sekarang cari kode ]]></b:skin> ,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.
Simpan Template Lalu Selesai...
menu navigasi breadcrumbs ini hanya akan terlihat diatas artikel sobat atau dibawah judul blog anda saat sobat membuka halaman suatu posting bukan halaman utama blogspot sobat.
Langkah demi langkah q jalani demi Membuat Breadcrumb Pada Blogger
hehee... :)
Pertama,pastikan sobat sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard, lalu pilih Tata Letak dan kemudian pilih Edit HTML, jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):
<b:includable id='main' var='top'>Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
Kemudian,cari lagi kode berikut:
<b:if cond='data:post.dateHeader'>
Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
<b:include data='post' name='breadcrumbs'/>
Nah,sekarang cari kode ]]></b:skin> ,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.
.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
Simpan Template Lalu Selesai...
menu navigasi breadcrumbs ini hanya akan terlihat diatas artikel sobat atau dibawah judul blog anda saat sobat membuka halaman suatu posting bukan halaman utama blogspot sobat.
Cara Membuat Menu Navigasi Breadcrumb di Blog
Reviewed by 《B》《H》《K》
on
06.21
Rating: