Cara Membuat Navigasi Breadcrumb

Navigasi
Breadcrumb
berfungsi untuk
memudahkan para
pembaca untuk
lebih jauh
menelusuri blog
anda. Sehingga
pageview anda
akan lebih banyak
dan pengunjung
blog anda juga
akan merasa lebih
nyaman mengujungi page anda. Pada
artikel ini saya
akan membagikan
Cara membuat
breadcrumbs di
blogger. Mengapa
di blogger?.. Ya
karena saya
menggunakan blogger kalau di wordpress kan beda kodenya yaitu PHP Mungkin breadcumbs di wp bisa lain kali aja yah..

contoh breadcumb bisa anda lihat
blog saya ini www.ficturewapsiteme.blogsot.com
Navigasi
Breadcrumbs di
blogger biasanya
terbentuk dari
susunan label
postingan blog
anda. Misalnya
saja saya
menuliskan
postingan yang
berjudul "Update
Status Via
Mozilla fiepox" dan
postingan ini
memiliki label
Tips Blogging,
Tutorial, Adsense
maka
breadcrumbs yang
terbentuk bisa
anda lihat seperti di atas postingan saya itu , kren gx? .
Baiklan sekarang
tahap membuat
navigasi
breadcrumb yang kodenya saya ambil dari template ini. cara membuatnya tidak terlalu sulit dan caranya bisa dilakukan seperti langkah
sebagai berikut:
1. Login ke Blogger
>> Rancangan >>
Edit HTML
2. Janga lupa
untuk membackup
dahulu sebelum
melakukan edit
dengan klik
Download
Template Lengkap
3. Centang
"Expand widget
templates"
4. Cari kode <b:if
cond='data:post.
title'> (untuk
mempermudah
gunakan CTRL+F)
dan Jika terdapat
lebih dari satu
kode pilih saja
kode yang
pertama atau cari h3 biasanya tidak jauh dibawahnya.
5. Copy dan paste
kode dibawah ini
tepat diatas kode

<b:if
cond='data:post.
title'>
<b:if
cond='data:
blog.
pageType ==
"item"'>
<div class='
breadcrumb'>
<a expr:href='
data:blog.
homepageUrl'
rel='tag'>
Home</a>
&#187;
<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>
&#187;
</b:if>
<data:post.
title/>
</div>
</b:if>


6. Selanjutnya cari
kode

]]></b:skin>

7. Copy dan
pastekan kode CCS
dibawah ini tepat
di atas kode CCS penutup

]]></
b:skin>

biar tambah bagus posisinya
ini kode CCS-nya


.breadcrumb
{
padding:5px
5px 5px 0px;
margin: 0px
0px 10px
0px;
font-
size:90%;
line-height:
1.2em;
border-
bottom:3px
double
#e6e4e3;
}

8. Simpan
template dan lihat
blog anda. kren tidak? yang belum ngarti silahkan komentar di bawah yah..

kata kunci yang baru dicari : Cara Membuat Navigasi Breadcrumb

Posted by Unknown on Senin, 12 Maret 2012 - Rating: 4.5

Title : Cara Membuat Navigasi Breadcrumb
Description : Navigasi Breadcrumb berfungsi untuk memudahkan para pembaca untuk lebih jauh menelusuri blog anda. Sehingga pageview anda akan lebih banyak ...

Tweet