Artikel kali ini cukup simple namun cukup menarik , kita akan Membuat Breadcrums dengan CSS , Breadcrumbs merupakan salah satu bentuk navigasi atau menu yang kerap memberikan struktur link atau tautan sesuai dengan urutan link atau halaman,anda dapat menemukan breadcrumbs di blogspot atau wordpress yang ada di internet atau di website-website.

Dalam artikel kali ini admin suckittrees akan memberikan tutorial membuat style breadcrumbs dengan CSS , sangat sederhana dan mudah untuk di terapkan.

Pada Umumnya Bentuk-Bentuk breadcrumb adalah sebagai berikut :

Home › Label › Judul Artikel

Atau

Home › Label 1 › Label 2 › Judul Artikel

Pada artikel kali ini kita akan membahas Style breadcrumb , bagaimana membuat tampilan breadcrumb , ini lebih cenderung pada style CSS nya saja, dengan begitu anda bisa menerapkan pada blogspot, website HTML PHP , maupun wordpress , atau juga platform yang lain.

Anda bisa membuka text editor anda , dan mulai untuk menjalankan code dibawah ini :

<style type="text/css">
.breadcrumb li {
    display: inline;
}
.breadcrumb li+li:before {
    content:"» ";
}
</style>

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Product</a></li>
    <li class="current"><a href="#">Options</a></li>
</ol>

 Demos Download