contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Simple Breadcrumbs With CSS only

Posted in HTML & CSS Life at 25 November 2017 With 0 Comments

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.

▼ Download Source Code Dibawah Ini ▼


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

Artikel Rekomendasi



Artikel Terkait

Diskusi