Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle

Breadcrumb merupakan salah satu fitur blog yang yang cukup penting. Dan tentunya, Navigasi Breadcrumb sudah lumrah anda ketahui selama berkecimpung dan membangun blog di dunia blogger. Untuk kali ini, sebuah tips Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle. Selain fungsi, juga mempunyai tampilan yang keren, menarik, dan elegant. 

Sebelumnya, sedikit gambaran breadcrumb untuk blog/web, yakni, merupakan salah satu bentuk navigasi yang diciptakan guna mempermudah siapapun untuk kemudian bisa melacak posisi atau asal sebuah dokumen (halaman). Saat ini, peran breadcrumb dalam sebuah blog atau website sudah dianggap penting, itu sebabnya banyak orang meyakini bahwasanya breadcrumb bisa dimanfaatkan sebagai alat jitu dalam mencapai SEO yang lebih baik.

Dan ternyata, breadcrumb berpenampilan ‘wah’ ternyata bisa diciptakan dengan CSS murni. Asumsikan saja jika kita ingin menyisipkan sentuhan menarik seperti panah kecil pada setiap sisi breadcrumb sekaligus membubuhi efek hover berwarna ke dalamnya. Belum lagi jika kita tambahkan pointer event untuk menyempurnakan hasilnya. Tentu ini akan terkesan ‘highly usable interface’. Dan dengan begitu, penampilan breadcrumb akan terlihat lebih unik dan memiliki ciri khas tersendiri.

Baiklah, untuk mewujudkan membuat  Navigasi Breadcrumb Bergaya Ala Triangle  dengan CSS murni, silahkan simak langkah-langkahnya dan jujur tips ini saya dapat dari : http://topspot-official.blogspot.com.

Berikut  Demo Navigasi Breadcrumb Bergaya Ala Triangle 

Dan berikut langkah sedehana memasang Navigasi Breadcrumb Bergaya Ala Triangle  dengan CSS murni di blog anda.

 Code CSS: 

.breadcrumb { margin:5px 0!important; list-style: none; overflow: hidden; font-size: 10px; } .breadcrumb li { padding:0!important; float: left; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 50px; background: brown; background: hsla(34,85%,35%,1); position: relative; display: block; float: left; } .breadcrumb li a:after { content: ” “; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid hsla(34,85%,35%,1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: ” “; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 10px; } .breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); } .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); } .breadcrumb li:last-child a { color: black; pointer-events: none; cursor: default; } .breadcrumb li a:hover { background: hsla(34,85%,25%,1); } .breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }

Untuk membuat panah kecil seperti bentuk segitiga/triangle sebagai dekorasi nya, kita akan menggunakan elemen :after. Lebih jelasnya, anda harus menelusuri kode  .breadcrumb li a:after {  pada script di atas. Elemen tersebut sekaligus berfungsi untuk menyeleksi bagian-bagian yang dikenali sebagai list. Disinilah kita akan mulai memahami bahwasanya ketika dilakukan penyeleksian, maka pada saat itulah muncul sebuah batasan tertentu yang mana akan ditunjukkan dengan indikasi seperti tanda panah kecil berbentuk segitiga. Ingin menggunakan nya? Salin script tersebut di atas kode  ]]></b:skin>  pada template anda. Setelah selesai, ikuti langkah kedua.

 Code HTML Markup:  

<b:includable id=’breadcrumb’ var=’posts’><b:if cond=’data:blog.homepageUrl != data:blog.url’> <b:if cond=’data:blog.pageType == &quot;static_page&quot;’> <ul class=’breadcrumb’><li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li><li><a><data:blog.pageName/></a></li></ul> <b:else/> <b:if cond=’data:blog.pageType == &quot;item&quot;’> <b:loop values=’data:posts’ var=’post’> <b:if cond=’data:post.labels’> <ul class=’breadcrumb’ xmlns:v=’http://rdf.data-vocabulary.org/#’> <li typeof=’v:Breadcrumb’><a expr:href=’data:blog.homepageUrl’ property=’v:title’ rel=’v:url’>Home</a></li> <b:loop values=’data:post.labels’ var=’label’> <li typeof=’v:Breadcrumb’><a expr:href=’data:label.url’ property=’v:title’ rel=’v:url’><data:label.name/></a></li> </b:loop> <li><a><data:post.title/></a></li> </ul> <b:else/> <ul class=’breadcrumb’><li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li><li><a>Unlabelled</a></li> <li><a><data:post.title/></a></li></ul> </b:if> </b:loop> <b:else/> <b:if cond=’data:blog.pageType == &quot;archive&quot;’> <ul class=’breadcrumb’> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>Archives for <data:blog.pageName/></a></li> </ul> <b:else/> <b:if cond=’data:blog.pageType == &quot;index&quot;’> <ul class=’breadcrumb’> <b:if cond=’data:blog.pageName == &quot;&quot;’> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>All posts</a></li> <b:else/> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>Posts filed under <data:blog.pageName/></a></li> </b:if> </ul> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id=’main’ var=’top’> <b:include data=’posts’ name=’breadcrumb’/>

Inilah struktur dasar dari keseluruhan script pembentuk. Bagian ini sudah dilengkapi class yang disebut dengan breadcrumb. Script pada bagian ini bisa anda salin ke dalam template blog anda. Caranya masuk ke edit html > kemudian cari kode  <b:includable id=’main’ var=’top’>  > lalu gantikan kode tersebut dengan script di atas. Amati hasilnya!

  Catatan Tambahan