Cara Membuat Breadcrumbs dengan CSS

menu bredcrumb bisa dikatakan sebagai menu petunjuk arah atau lokasi pada sebuah postingan blog atau website, manfaat navigasi breadcrumbs ini juga dapat memperbaiki SEO suatu situs yang memasang navigasi breadcrumbs ini. Menurut pakar SEO navigasi breadcrumbs ini membuat postingan blog kan cepat terindeks karena mempermudah Search Engine mengidentifikasi halaman blog. Manfaat lain breadcrumbs menu ini juga untuk mempermudah pengunjung mengetahui lokasi dia dalam sebuah halaman blog untuk kembali ke lokasi urutan dari halaman tersebut.

Saya juga pernah memposting menu hampir seperti ini namun yang dulu berbeda dengan yang ini yang dulu hanya sebuah menu Breadcrhumbs Navigasi kalo mau lihat silahkan lihat dihalaman :
- Cara Membuat Breadcrumb Terinddex Di Google

Contoh navigasi breadcrumb seperti dibawah ini :

Contoh tampilan breadcrhumbs yang akan kita buat seperti dibawah ini, dan akan nampak di atas judul posting.

Nah jika blog kamu belum memiliki breadcrumb segeralah pasang menu navigasi breadcrumb tersebut, caranya dibawah ini :

1. Masuk ke Template >> Edit HTML dan klik "Expand Widget Template"

2. Cari kode dibawah ini :

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

3. Letakkan kode berikut ini tepat di bawah kode no.2 (kode no.2 ada 2 letakkan setelah kode yang pertama)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<ul id='breadcrumbs'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li> <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li><b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> </b:loop> </b:if>
<li><a class='current' expr:href='data:post.url'><data:post.title/></a></li>
</ul>
</b:if>

4. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas ]]></b:skin>

Kode CSS Breadcrumb :

ul#breadcrumbs {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs{
background: #eee;font-size:11px;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
box-shadow: 0 0 2px rgba(0,0,0,.2);
/* Clear floats */
overflow: hidden;
width: 100%;
}
#breadcrumbs li{
float: left;
}
#breadcrumbs a{
padding: 3px 12px 3px 17px;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, right bottom, from(#f5f5f5), to(#ddd));
background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);
background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);
background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);
background-image: -o-linear-gradient(left, #f5f5f5, #ddd);
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs li:first-child a{
padding-left: 1em;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#breadcrumbs a:hover{
background: #fff;
}
#breadcrumbs a::after,
#breadcrumbs a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
#breadcrumbs a::after{
z-index: 2;
border-left-color: #ddd;
}
#breadcrumbs a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
#breadcrumbs a:hover::after{
border-left-color: #fff;
}
#breadcrumbs .current,
#breadcrumbs .current:hover{
font-weight: normal;
background: none;
}
#breadcrumbs .current::after,
#breadcrumbs .current::before{
content: normal;
}

5. Simpan template

Sekarang lihat hasilnya pada posting sobat, jika berhasil breadcrumb ini akan tampil diatas judul postingan blog sobat...!