» » » Membuat Breadcrumb Bergaya Seperti Google

Berbahasa Resmi
Breadcrumb memang bagus untuk pengarah sebuah blog dan sebagai penilai batasan pada tiap-tiap halaman. Namun tidak sedikit pula yang mengatakan bagus untuk SEO, tetapi dalam hal SEO itu sendiri kami kecualikan, dan kami tidak ingin berdebat masalah SEO atau tidaknya breadcrumb tersebut. Dan kalian bisa cek step algoritma yang menunjukan nilai SEO atau tidak sebuah breadcrumb.

Untuk Anda yang sudah pernah memasang Breadcrumb versi terdahulu yang berbasis teks,  yang tidak lebih kurang tampilannya seperti ini : ( gambar sekedar contoh )


Maka sekarang kita akan ubah suaikan dengan tampilan yang cukup mirip seperti bredcrum milik Google, yang tidak lebih kurang bertampilan seperti ini : ( gambar sekedar contoh )


Cara merubahnya sangatlah mudah, pada kode CSS breadcrumb Anda yang sudah terpasang silakan Anda hapus dan ganti dengan kode berikut :

.breadcrumbs{zoom:1;line-height:30px;height:30px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
.breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}
.breadcrumbs:after{clear:both}
.breadcrumbs a{color:#999}
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
.breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs a :last-child{color:#333}
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
.breadcrumbs a:hover{text-decoration:none!important}
.breadcrumbs span:hover{color:#666}
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
.breadcrumbs span{margin-top:1px;color:#999}

Silakan kalian simpan hasilnya. Ada baiknya kalian pratinjau terlebih dahulu apabila mungkin.

Catatan : Apabila Anda belum pernah memasang Breadcrumb, silakan kalian cari tutorialnya diberbagai web/blog.

Catatan 2 : Tampilan breadcrumb bisa saja tidak sama persis dengan tampilan seperti Google, namun Anda bisa edit CSS diatas agar sesuai.
Share: