Membuat breadcrumb dengan css3

Membuat breadcrumb dengan css3 KWx ( keywordnya ) bagus gak kira2. . .? hehhee sebenarnya Breadcrumbs ini dengan css2 tapi karena keyword css3 banyak di cari jadi ya itu saja di gunakan, oklah mari kita mulai pembahasan tutorial kali ini, emmm kalau breadcrumb di kasi bentuk list gimana ya, ya gak gimana - mana yang pastinya keren apalagi jika anda gunakan background linear gradient yang pastinya bisa bikin breadcrumb makin keren, sebenarnya linear gradient itu yang bikin breadcrumb jadi css3 tapi karena saya gak pake'in linear jadinya css2 heehehe, ok sekarang silahkan anda masuk di blog anda lalu

1. Masuk Rancangan
2. Klik Edit HTML
3. Jika Editor Baru langsung saja klik Template
4. Centang Expand Template Widget

Setelah itu silahkan cari kode ]]></b:skin> dan simpan kode css di bawah ini di atas kode ]]></b:skin>

#breadcrumbs-system{
overflow: hidden;
width: 100%;
}
#breadcrumbs-system li{
float: left;
margin: 0 .5em 0 1em;
list-style-type: none;
font-size: 13px;
}
#breadcrumbs-system a{
background: #1478ff;
padding: 2px 5px;
float: left;
text-decoration: none;
color: #DDD;
position: relative;
}
#breadcrumbs-system a:hover{
background: #0f53b0;
}
#breadcrumbs-system a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #1478ff #1478ff #1478ff transparent;
left: -1em;
}
#breadcrumbs-system a:hover::before{
border-color: #0f53b0 #0f53b0 #0f53b0 transparent;
}
#breadcrumbs-system a::after{
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 #1478ff;
right: -1em;
}
#breadcrumbs-system a:hover::after{
border-left-color: #0f53b0;
}

Setelah itu cari kode <b:includable id='main' var='top'> dan simpan kode di bawah ini di atas kode tersebut

<!--START OF BREADCUMB SYSTEM-->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id='breadcrumbs-system'>
<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:loop>
</b:if>
<li><data:post.title/></li>
</ul>
</b:if>
</b:if>
<!--END OF BREADCUMB SYSTEM http://zhinto.blogspot.com/-->

Lalu klik SIMPAN TEMPLATE dan lihat hasilnya.
Untuk warna lain silahkan anda edit sendiri kode cssnya.