Untuk itu kali ini Indobonar nge-share tentang cara membuat menu navigasi breadcrumb di blog dan bagi yang belum tahu, Breadcrumb adalah link navigasi yang biasanya tampil cantik di atas judul atau title posting dalam modus postingan bukan dalam modus Home seperti terlihat pada blog ini dimana Breadcrumb menampilkan Halaman Depan .
Berikut Cara Membuat Menu Navigasi Breadcrumb di Blog :
1. Login ke blogger anda
2. Pilih dan Klik Template
3. Pilih dan Klik Edit HTML
4. Centang pada Expand Widget Templates
5. Cari kode <b:if cond='data:post.title'> untuk memudahkan mencarinya gunakan Ctrl + F atau F3
6. Paste kode di bawah ini dan letakkan dibawah atau setelah kode diatas :
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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>
7. Selanjutnya cari kode ]]></b:skin> dan copy paste kode dibawah ini di atasnya :
.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
8. selesai deh tinggal disave aja template nya .
selamat mencoba ya..
0 komentar:
Post a Comment