Kali ini saya akan membahas tentang cara membuat navigasi breadcrumb di blogger. Yaps yang seperti di atas judul postingan blog saya (bukan di home yah).. Sebenarnya saya mengopy paste dari blog ini yang tentunya sudah saya rubah sedikit.
Menurut admin blognya caranya seperti ini :
<--- Mulai --->
Cara Pasang Breadcrumb Di Blogger Cara 1
1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Template expand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;}
8.Kemudian cari kode berikut
<div class='post hentry uncustomized-post-template'>
9.Paste kode dibawah ini tepat dibawah kode <div class='post hentry uncustomized-post-template'>
<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>
10. Save hasil modifikasi
11. Dan lihat hasilnya di blog anda.
Cara Pasang Breadcrumb Di Blogger Cara 2
1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Template expand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
8. Kemudian cari kode <b:includable id='post' var='post'>
Setelah itu letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:
<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> / <a expr:href='data:post.link'><data:post.title/></a>
</div>
9. Kemudian silahkan simpan perubahan template anda dan silahkan cek di halaman artikel (post page) apakah Breadcrumb sudah ada.
Cara Pasang Breadcrumb Di Blogger Cara 3
Navigasi breadcrumb di blogspot akan tampil berdasarkan label/tag dari postingan anda. Berikut tutorialnya.
1. Masuk ke blogger.
2. Pilih menu Tata Letak (Layout) » Edit HTML.
3. Centang tulisan Expand Widget Templates.
4. Cari kode beriku
<b:if cond='data:post.title'>
5.Tambahkan kode berikut di bawahnya.
<b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>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/>
</b:if>
7.Jangan lupa ganti tulisan warna biru dengan nama blog anda.
8.Simpan template.
Anda bisa menambahkan garis di bawah navigasi dengan menambahkan kode di bawah kode <hr/><data:post.title/> di atas.
Selesai...... Semoga Bermanfaat.
<--- Selesai --->
Nah itu dia postingannya... Awalnya sih saya juga sempat bingung karena dari cara 1-2 tidak bisa-bisa, tetapi allhamdulillah cara yang ke-3 berhasil...
Selamat mencoba ya... J
0 comments:
Posting Komentar