Cara modifikasi NAVIGASI BREADCRUMB PADA BLOG

MEMBUAT DAN MODIFIKASI NAVIGASI BREADCRUMB PADA BLOG, Sebenarnya postingan yang membahas tentang navigasi breadcrumb ini sudah banyak yang tahu, namun saya yakin dari sekian banyak yang tahu tersebut, masih lebih banyak yang belum tahu tentang membuat navigasi breadcrumb ini. Dengan adanya navigasi breadcrumb ini akan memudahkan pembaca karena mereka akan tahu dimana posisi mereka saat ini (sedang membaca suatu halaman artikel). Biasanya letak penyimpanan navigasi breadcrumb ini berada diatas judul postingan kita yang hanya akan muncul di halaman postingan saja.

Untuk membuat navigasi breadcrumb ini kalian bisa mengikuti tahap-tahap dibawah ini :

1. Login Ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand template widget)
3. Simpan CSS berikut diatas kode ]]></b:skin>

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

4. kemudian silahkan kalian cari kode berikut :

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

5. Simpan kode berikut setelah 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>

6. 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 sudah selesai, tapi saya akan berbagi sedikit untuk memodifikasi navigasi breadcrumb ini :

^^ Merubah Home dengan Gambar

Untuk merubah kata HOME dengan gambar kalian bisa menambahkan kode berikut :

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

Sisipkan pada kode HTML diatas untuk menggantikan kata 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 navigasi breadcrumb kedua ini, kalian hanya perlu mengganti CSS diatas dengan CSS dibawah ini :

.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/AVvXsEgdDTXylizxRGji-mJU_UcU77G_4EttFK_JlB13B8kKH9Ds1MaSGR1GCRXsdxAh1SnW0d7MdwnGHwJjTRjry3EFhX0sRj8Jz77AhZREvCVd6uhlKO9HBTy-7meLIlYNGeSu4a-mu3R7XzJH/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/AVvXsEhctPyNw32E-1hBzR5yamx0jPb7XRLB6hfD1XVyPkZMhL_r5CknAelGMMQHbi51pZIiqPJ2K_CtUU8mc3e4gN8dz-MYTuGD98187PpR5gTIXEzuLKYU1O17AVOwuChvk3eerR8_SvB_2wkV/) no-repeat right center}

Hasilnya akan seperti ini :



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

Semoga bermanfaat, bisa dipraktekkan dan terima kasih.

sumber:z33s.co.cc