Modifikasi Navigasi Breadcrumb Blog

Modifikasi Navigasi Breadcrumb  Blog...adalah sebuag trik blog yang memperindah tampilan header pada postingan/tulisan kita. Mungkin teman-teman masih bingung mengenai Breadcrumb!. Tetapi jika anda melakukan langkah-langkah  yang akan saya berikan, kalian akan tahu nantinya. Oke untuk itu langsung saja kita ke pokok bahasanya yah...

1. Login ke blogger dengan account anda sendiri.

2. Pada  Dasbor blog anda, silahkan pilih Rancangan

3. Kemudian pilih Edit HTML

4. Simapan kode CSS di bawah ini tepat di Atas kode ]]></b:skin>

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

5. kemudian silahkan kalian cari kode berikut :

<div class='post hentry uncustomized-post-template'>

6. Letakkan kode cerikut di bawah kode no 4

<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'>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 != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

7. Simpan template kalian

Hasilnya akan seperti ini :

Browse » Home » Label,label,label  » Judul Posting

 Keterangan:

• Kalian bisa mengganti kata Browse dan Home pada kode diatas, misal pake kata Anda Disini, Rumah, dll
• untuk warna pada garis bawah breadcrumb navigasi ini kalian bisa merubahnya pada kode CSS diatas tepatnya kode #cadaef

 Sebenarnya pembuatan  navigasi Breadcrumb sudah selesai, tetapi ini mungkin  lebih menarik. 

Kali ini saya ingin memberi modifikasi yang lain.

>>Merubah Home Dengan Gambar<<

 Untuk kata HOME bisa anda kasih gambar dengan menambah kode di bawah ini.

<img alt='Home' src='URL GAMBAR HOME KALIAN'/>

Sisipkan pada kode diatas tepat pada tulisan Home  

Sehingga hasilnya seperti ini:

<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'><img alt='Home' src='URL GAMBAR HOME KALIAN'/></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 != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Hasilnya akan seperti ini :

>>Modifikasi kedua<<

 Untuk modifikasi kedua ini, kalian hanya mengaanti kode CSS di atas dengan kode berikut.

.breadcrumbs{
padding:10px 0 10px 10px;
margin:0 0 5px;
font-size:95%;
line-height:1.4em;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTZw1_yXoGE45guPzQTrIJ3G-r20XztuzeYr2O4-Dpvr1OZbToumZ_IVgZgDAdQEK0X2qMcohQcDgC68WWroYHS_Oqm1aO5Uvjm1db6oi4tJsqPuTnnpBfKc8eq6IQmiuuVypgHD3-3JaG/s1600/tbg.png);
border:1px solid #C9C7C7}

.breadcrumbs a{
padding:5px 20px 5px 10px;
text-transform:capitalize;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4i-Xy97_jbwwLHmf9qrZDQwJCftLUnfP_5BYYBlSP0hzX2_Y-fVDZWMeCPuLzgNI0-6YSJdWsxk-vuZdntZpkiQVUpz2W8U9S8eAiamlTJ9j-qCgI6FXE5x1JY51AY8bC1kmnaK1B4XPm/) no-repeat right center}

Hasilnya akan seperti ini :

Untuk gambar kalian bisa juga menggunakan gambar panah, gambar arah dan lain-lain.

Semoga bermanfaat..nd GBU

Baca juga yang ini:

1. Membuat Could Top Komentar

2.Cara Membuat Tulisan Berjalan

3. Cara Membuat Judul Blog Berjalan

4. Dan Lain-lain DISINI