Home > Blogger Widget > CSS Menu Dropdown Keren untuk Blogger
CSS Menu Dropdown Keren untuk Blogger
Posted on Sabtu, 13 Oktober 2012 by do it your self
D-Copy Blog | Seperti pada postingan sebelumnya mengenai cara membuat menu mega dropdown dibawah header blog kali ini saya ingin menunjukkan lain CSS3 murni terbang menu navigasi murni dirancang dengan menggunakan teknik terbaru CSS3 dan tanpa menggunakan JavaScript atau Gambar. Menu ini memiliki beberapa efek bernyawa yang bagus, seperti ketika Anda mengarahkan mouse pada menu Anda akan melihat efek jantung berdetak dengan animasi terbang. Menu ini kompatibel dengan semua browser modern terbaru ini dengan CSS3 dukungan. Dalam tutorial ini saya akan menunjukkan bagaimana Anda dapat menambahkan menu ini terbang indah untuk blog Anda, hanya dengan mengikuti langkah-langkah berikut mudah.
4. Pastekan kode dibawah ini, diatas pada kode diatas :
5. Masuk ke Menu Layout > Add Gadget dan pastekan kode dibawah ini :
6. Ganti URL dan Title dengan yang Anda inginkan dan Save jika sudah selesai.
Semoga bermanfaat. Thanks.
Langkah :
- Buka akun Blogger Anda
- Masuk ke Menu edit HTML, jangan lupa centang Expand Template Widget
- Cari kode dibawah ini :
]]></b:skin>
4. Pastekan kode dibawah ini, diatas pada kode diatas :
#nav,#nav ul {4. Save Template Anda.
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
height: 36px;
list-style: none outside none;
margin: 40px auto;
text-shadow: 0 -1px 3px #202020;
width: 980px;
/* border radius */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/* box shadow */
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
/* gradient */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
#nav ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;
}
#nav li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;
}
#nav li:first-child {
border-left: 0 none;
margin-left: 5px;
}
#nav li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
/* gradient */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
/* keyframes #animation1 */
@-webkit-keyframes animation1 {
0% {
-webkit-transform: scale(1);
}
30% {
-webkit-transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes animation1 {
0% {
-moz-transform: scale(1);
}
30% {
-moz-transform: scale(1.3);
}
100% {
-moz-transform: scale(1);
}
}
#nav li > a:hover {
/* css3 animation */
-moz-animation-name: animation1;
-moz-animation-duration: 0.7s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation1;
-webkit-animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
z-index: 4;
}
#nav li:hover ul.subs {
left: 0;
top: 34px;
width: 150px;
}
#nav ul li {
background: none repeat scroll 0 0 #838383;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
opacity: 0;
width: 100%;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
/* keyframes #animation2 */
@-webkit-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
@-moz-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
#nav li:hover ul li {
/* css3 animation */
-moz-animation-name: animation2;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation2;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#nav li:hover ul li:nth-child(1) {
-moz-animation-delay: 0;
-webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
-moz-animation-delay: 0.05s;
-webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
-moz-animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
-moz-animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
-moz-animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
}
5. Masuk ke Menu Layout > Add Gadget dan pastekan kode dibawah ini :
<ul id="nav">
<li><a href="http://www.script-tutorials.com/">Home</a></li>
<li><a class="hsubs" href="Your Links">Menu 1</a>
<ul class="subs">
<li><a href="Your Links">Submenu 1</a></li>
<li><a href="Your Links">Submenu 2</a></li>
<li><a href="Your Links">Submenu 3</a></li>
<li><a href="Your Links">Submenu 4</a></li>
<li><a href="Your Links">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="Your Links">Menu 2</a>
<ul class="subs">
<li><a href="Your Links">Submenu 2-1</a></li>
<li><a href="Your Links">Submenu 2-2</a></li>
<li><a href="Your Links">Submenu 2-3</a></li>
<li><a href="Your Links">Submenu 2-4</a></li>
<li><a href="Your Links">Submenu 2-5</a></li>
<li><a href="Your Links">Submenu 2-6</a></li>
<li><a href="Your Links">Submenu 2-7</a></li>
<li><a href="Your Links">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="Your Links">Menu 3</a>
<ul class="subs">
<li><a href="Your Links">Submenu 3-1</a></li>
<li><a href="Your Links">Submenu 3-2</a></li>
<li><a href="Your Links">Submenu 3-3</a></li>
<li><a href="Your Links">Submenu 3-4</a></li>
<li><a href="Your Links">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="Your Links">Menu 4</a></li>
<li><a href="Your Links">Menu 5</a></li>
<li><a href="Your Links">Menu 6</a></li>
</ul>
6. Ganti URL dan Title dengan yang Anda inginkan dan Save jika sudah selesai.
Semoga bermanfaat. Thanks.
Artikel Terkait
Category Article Blogger Hack, 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)