Home > Blogger Widget > 5 CSS Breadcrumbs Keren Untuk Blogger
5 CSS Breadcrumbs Keren Untuk Blogger
Posted on Jumat, 12 Oktober 2012 by do it your self
D-Copy Blog | Breadcrumbs adalah navigasi alternatif. Tidak hanya apakah mereka bertindak sebagai alat bantu visual untuk menginformasikan pembaca tentang posisi mereka dalam hirarki blog, tetapi juga memberikan nuansa yang lebih terstruktur.
Sebelum Anda mendapatkan Memulai
Pastikan bahwa Anda sudah memiliki Breadcrumbs di blog Anda. Disini saya hanya mengganti gaya breadcrumbs saja. Jadi bila Anda belum memiliki breadcrumbs di googling saja.
Sebelum Anda mendapatkan Memulai
Pastikan bahwa Anda sudah memiliki Breadcrumbs di blog Anda. Disini saya hanya mengganti gaya breadcrumbs saja. Jadi bila Anda belum memiliki breadcrumbs di googling saja.
Langkah :
- Buka akun Blogger Anda
- Masuk ke Menu Template, centang Expand Template Widget
- Pilih desain widget yang Anda sukai dibawah ini dan ganti kode breadcrumbs Anda.
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}
.breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}
.breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}
.first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}
.breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}
.breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}
.breadcrumbs> a:before{content:'';position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}
.breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}
.breadcrumbs a{list-style:none}
.breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:"";position:absolute;top:50%;left:0;display:none}
.breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}
.breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}
.breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}
.breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}
.breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:31!important}
.breadcrumbs a:nth-child(3){z-index:32!important}
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
.breadcrumbs a:nth-child(even):hover{color:#333}
.breadcrumbs a:nth-child(odd):hover{color:#FFF}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:29!important}
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}
.breadcrumbs{zoom:1;line-height:40px;height:40px;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}
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a span::after{background:#DDD;content:"";height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}
.breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}
.breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}
Artikel Terkait
Category Article Blogger Widget
Arsip Blog
-
▼
2012
(4523)
-
▼
Oktober
(2077)
- 8 Hal yang Tak Boleh Dikatakan Pada Calon Pengantin
- 7 Tipe Pria di Internet
- Di China Ada Nenek-Nenek Berumur 1 Tahun!
- Bangkit Dari Putus Cinta? Ini Triknya
- Cara Membuat Efek Petir di Blog
- Jamur Truffle, Jamur Termahal di Dunia
- Prediksi Togel Hongkong Hari Ini Kamis 01 November...
- Prediksi Togel Singapura Kamis 01 November 2012
- Prediksi Togel hari Ini (Kamis 01 November 2012) T...
- Berbagai Bentuk Buah-Buahan yang Unik dan Lucu
- Jangan Menyimpan Kaleng Cola Di Freezer Atau Begin...
- Pasangan Kolombia Lahirkan Bayi Jelmaan Setan?
- Indahnya Pelangi Moon Bow Dimalam Hari
- VIA ARTiGO A1250, PC Terkecil di Dunia dengan Pros...
- 10 Musium paling menakutkan di dunia
- 10 Laga terbaik sepanjang sejarah sepak bola dunia
- Kepribadian Cewe berdasarkan cara duduknya
- 10 tembok paling bersejarah di dunia
- 10 Bandara terbaik di dunia
- Hutan Raje Mandare yang penuh dengan keanehan
- Fakta Menarik dari Alat Kelamin Pria
- Musim Hujan Bikin Orang Makin Galau, Kamu Termasuk?
- Tenis Meja : Apa Istimewanya ?
- 10 Hand Phone/HP terunik di dunia
- Kota termacet di dunia
- Kulam, Ilmu Voodoo dari Filipina
- Foto-Foto Ular Memangsa Manusia
- Unik: Jalan Tol Antar Gedung Di Jepang
- Kejadian aneh yang tidak masuk logika
- Fakta unik tentang negara Korea Utara
- Fakta unik tentang Ikan di Dunia
- 7 Jenis Jerawat Paling Umum Ditemui
- Mitos, Tsunami Jepang Akibat Ikan Lele Raksasa
- Tips jika HP tercebur ke air
- Dilarang Menggunakan Celana Melorot di Wilayah ini!
- Menambahkan gadget di header blog
- Cara memanipulasi jumlah komentar blog
- Sosok ilmuwan Muslim yang terlupakan
- Inilah 10 Sate Terunik di Indonesia
- Cara mengatasi/mengobati kulit kaki pecah dan kapalan
- Dampak Buruk Sering Curhat Masalah Cinta dengan Sa...
- Inilah 10 Tempat Ziarah Terseram Di Dunia
- Planet Theia, Benda Besar Yang Menabrak Bumi
- Makhluk-makhluk ini Mata Rantai Evolusi yang Hilang?
- “Moses Bridge” Jembatan yang Membelah Sungai di Be...
- Patung Wisnu Kencana Tertinggi di Dunia
- 4 Miss World Paling Kontraversial di Dunia
- Cara ngecek suhu/temperatur panas komputer
- Cara memperbaiki dokumen MS Office yang rusak
- 10 Tipe Cewek Berdasarkan Bentuk Payudara
- Wujud Asli Dari Firefox
- 7 Minuman Keras Asli Indonesia
- Mengapa Banyak Artis Korea Bunuh Diri?
- 12 Peristiwa Berdarah Sepakbola Terburuk Dalam 3 D...
- Sosok Dan Pesona Ibukota Jakarta Pada Tahun 1970-an
- 5 Kisah Penghargaan/hadiah Paling Aneh Di Dunia
- Hal-hal pemicu keluarnya kentut
- Inilah hewan yang bisa memprediksi cuaca
- 10 Masjid tertua di dunia
- Foto-foto Kapal Titanic dari proses pembuatan samp...
- 10 Hasil Penelitian Menarik tentang Orgasme
- Benarkah Payu Dara besar tidak nyaman saat bercinta
- Roler Coaster yang bikin mendebarkan jantung
- Cara Asik Jaga Kesehatan Kulit
- Alat-alat kreatif untuk di dapur
- Inilah 5 Tanda Tangan Termahal Di Dunia
- Tampang Bintang Rock pada Masa Muda dan Tua
- VIDEO Badai Sandy Tertangkap Kamera dari Luar Angkasa
- Makan Ini Ternyata Bisa Untuk Mengembalikan Mood B...
- Tips Jika Terjebak Jatuh Cinta Dalam 'Friend Zone'
- Bersyukurlah Atas Hp Yang Anda Miliki!!
- Ciri-Ciri Pria yang Mempunyai Masa Depan Cerah
- Rajanya Twitter, Bukan Orang Terkenal, 1,8 Juta Fo...
- Menyibak Misteri Pohon Zaitun Tempat Yesus Berdoa
- Suku Maya Protes Ramalan Kiamat Demi Keuntungan Bi...
- Rudal Iran Itu Bernama “Nabi Agung 7”
- Kostum Jadul Para Superhero, Hulk-nya Dijamin Ngak...
- 6 Tips Mengatasi Bau Kaki
- 4 Kebudayaan Jepang yang Unik dan Gila
- 6 Mitos Pria yang Mulai Kadaluwarsa
- Gaet Pasangan, Monyet Berlumur Air Seni
- 10 Cerutu Termahal Di Dunia
- 8 Fakta Menarik tentang Kota Seoul
- Perbedaan Lama Durasi Puasa Di Berbagai Belahan Dunia
- Iklan 'Diskon TKW' Menghina Harga Diri Bangsa Indo...
- Mengungkap asal usul Patih Gajah Mada yang misterius
- Kuil Putih, Mahakarya Sang Seniman Eksentrik
- Sayuran raksasa pemecah rekor
- [renungan] Belajar Tentang Kehidupan dari Johnny Depp
- Demi Perluas Masjid Nabawi, Makam Nabi Muhammad Ak...
- Foto badai Sandy diatas patung Liberty | Asli atau...
- Kumpulan Kata Kata Mutiara Persahabatan Sejati
- Mengungkap Legenda Taman Gantung Babylonia
- Tokyo Skytree, Menara Tertinggi di Dunia
- Inilah Arti Kata Ciyus, Miapah, Cemungudh, dll...
- Mitos asal muasal larangan menikah orang jawa dan ...
- Candi-candi terindah di India dan sekitarnya
- "dia Cinta Aku Nggak Sih?" Liat Saja Pupil Matanya
- 7 Jenis Pahala Yang Dapat Dinikmati Selepas Mati
- 7 Gunung Berwajah Manusia yang Terkenal di Dunia
-
▼
Oktober
(2077)