Cara Modifikasi Navigasi Breadcrumb

Wah kali ini saya akan mempublikasikan karya orang lain kepada sobat .
ok. langsung aja kita mulai.yang belum tau cara pasang breadcrumb silahkan ikuti langkah-langkah berikut :
Pertama harus login dulu = => terus pilih tata letak = => edit HTML [jangan lupa centang expand Template Widged dan kalau perlu download lengkap templatenya ya buat sekedar jaga-jaga kalau terjadi kesalahan bisa dikembalikan lagi seperti semula]. nah kalau sudah cari code ini ]]></b:skin> kalau bingung tekan Ctrl+F masukkan codenya di kolom Find tekan enter jamin dech pasti ketemu. Kalau sudah ketemu masukkan code dibawah ini  tepat diatas code ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Kalau sudah lalu cari kode seperti ini <div class='post hentry uncustomized-post-template'>  dan masukkan code warna merah dibawah ini tepat dibawah code <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

Habis itu tinggal save dech dan lihat hasilnya. 

Ok kalau Navigasi Breadcrumb sudah terpasang, kita lanjutkan ke pembahasan utama yaitu Modifikasi Navigasi Breadcrumb dengan menambah Background warna atau gambar. mudah kok caranya, pada code dibawah ini :

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
} 

 

Tinggal tambahkan code dibawah :

background:url(http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif?imgmax=800)repeat; 

Sehingga hasilnya jadi seperti dibawah ini :

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;

background:url(http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif?imgmax=800)repeat;
} 

Habis itu tinggal save dech dan lihat hasilnya.  

jika masih kurang puas dengan hasilnya dan sisinya melingkar dikenal dengan istilah Rounded Corner tinggal tambahkan code dibawah ini :

  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px; 

Sehingga hasilnya seperti dibawah ini :

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;

background:url(http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif?imgmax=800)repeat;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
}   

Ket : 

http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif Bisa kawan ganti dengan gambar kawan sendiri

Kalau ingin di kasih Background warna tinggal rubah background:url(http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif?imgmax=800)repeat; menjadi seperti ini background:#000000; [#000000] kode warna tersebut bisa diganti dengan warna kesukaan kawan sendiri kalau bingung cari disini kode-kode warna 

border-bottom:3px double #e6e4e3; yang warna merah bisa dihapus u/ menghilangkan border / garis bawahnya

Artikel ini ada sedikit pengurangan dan penambahan tapi tidak mengubah isi pokoknya.

Sumber : http://www.rizkyzone.com/