Home > Blogger Hack > Cara Buat Menu Dropdown di Bawah Header
Cara Buat Menu Dropdown di Bawah Header
Posted on Kamis, 11 Oktober 2012 by do it your self
D-Copy Blog | Membuat menu dropdown memang menjadi suatu hal yang menarik bagi sebuah web maupun blog dan Anda maupun saya akan belajar bagaimana cara melakukan menu dropdown dibawah header. Menu dropdown ini sangat keren dan stailis yang dibuat oleh Faizan.
Fitur :
- Didisain dengan background dan warna menu yang sangat stailis
- Didisain juga dengan gambar dan link
- dan juga didisain dengan kotak berlangganan artikel lewat email
- Didisain dengan 2 dropdown, kiri dan kanan seperti pada gambar diatas
Kekurangan :
- Menu dropdown ini ada kekurangan pada beberapa template, kekurangan menu ini pada bagian pada saat heading disorot mouse maka ada background yang tidak seharusnya ada.
Ok langsung saja ikuti instruksi dibawah ini dengan baik, sebelum itu backup dahulu template Anda.
- Buka akun Blogger Anda
- Masuk ke menu edit HTML dan jangan lupa centang Expand Template Widget
- Cari kode dibawah ini :
]]></b:skin>4. Pastekan kode dibawah ini diatasnya :
ul.dropmenu{5. Cari kode dibawah ini :
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4VmTbCvPt4xYC_-HqpAIAw5bVHKowHOuqL16SDUs3jBr1XWAfaGc3qNpmPz5g1j6qTjM57Nkvt4hCuZUNnHTqFdqvZdGY87-BkcdK1E6SCpgp1-Srk8lwEabCKb0tF2U0lmi9CnUCLY/s1600/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
.dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
.dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8nzKR-YSVLt6xAzMmlanxSFqAPoCpfp14rK0Jkqzsq8icI18Rwk3W3glg1mcFbEP1v9gqD36YVFdaTlhyphenhypheneyotqLJ3uZbMWhspxKybhO0lXgg3XQXqWf3aUCU4LNk0N8UbU2TGSDS59j8/s1600/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
.dropmenu li a:hover span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3bALO3WdVxQTt3QchQMjqEJyhDic1tMeL7GLlCBS0Av89HNsoKJjCjQ-gMt1OgXxNei7cu7RzKsZ13Vr4O9jerNbYZWTjqXxM8UfNUbYJVBB93dL1o_fCzk13N2e7enovdS6g6TZ86mc/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-nUIo-WzPsEBql6SRZUirCfYprp3SH3o1bgX6SLAedU36nZ2ZsB5NmLkfinlumDBErtAUDVIBCDJ27VzVfk850ZLNlzrDUjWpe7v9UDzpnU2cEv1itQGKbhde-ETOKEz0LZ4hgau5Gk/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-decoration: underline;
text-transform: none;
}
a.selected, a:hover{
color: #0657AD !important;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-nUIo-WzPsEBql6SRZUirCfYprp3SH3o1bgX6SLAedU36nZ2ZsB5NmLkfinlumDBErtAUDVIBCDJ27VzVfk850ZLNlzrDUjWpe7v9UDzpnU2cEv1itQGKbhde-ETOKEz0LZ4hgau5Gk/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3bALO3WdVxQTt3QchQMjqEJyhDic1tMeL7GLlCBS0Av89HNsoKJjCjQ-gMt1OgXxNei7cu7RzKsZ13Vr4O9jerNbYZWTjqXxM8UfNUbYJVBB93dL1o_fCzk13N2e7enovdS6g6TZ86mc/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-nUIo-WzPsEBql6SRZUirCfYprp3SH3o1bgX6SLAedU36nZ2ZsB5NmLkfinlumDBErtAUDVIBCDJ27VzVfk850ZLNlzrDUjWpe7v9UDzpnU2cEv1itQGKbhde-ETOKEz0LZ4hgau5Gk/s1600/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
.dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
.dropmenu li div div a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.dropmenu li div div a:hover{
color: #000;
text-decoration: none;
}
ul.left{
float: left;
width: 145px;
}
ul.right{
float: right;
width: 145px;
}
.small{
color: #666;
font-size: 10px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
.products{
width: 300px;
padding: 15px !important;
}
.products ul{
width: 100%;
}
.products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
.products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
.products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.products img{
float: left;
padding-right: 10px;
}
.products ul li a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
}
.tutorials{
width: 300px;
}
input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
label{
padding: 0px 0px 4px 0px;
display:block;
}
button{
background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4VmTbCvPt4xYC_-HqpAIAw5bVHKowHOuqL16SDUs3jBr1XWAfaGc3qNpmPz5g1j6qTjM57Nkvt4hCuZUNnHTqFdqvZdGY87-BkcdK1E6SCpgp1-Srk8lwEabCKb0tF2U0lmi9CnUCLY/s1600/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
</head>6. Pastekan kode dibawah ini diatasnya :
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>7. Cari kode yang mirip seperti pada kode dibawah ini :
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu();
});
</script>
<div id='header-wrapper'>8. Diatasnya pastekan kode dibawah ini :
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blogger Lab (Header)' type='Header'/>
</b:section>
</div>
<ul id="nav-one" class="dropmenu">9. Ganti kode-kode yang diwarnai pada kode diatas.
<li>
<a href="#">Home</a> </li><li>
<a href="#">Forum</a><ul>
<li><a href="#">Support</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Your work</a></li>
</ul>
</li>
<li>
<a href="#item3">Downloads</a><ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
<a href="#">Products</a>
<div class="products">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ZklyVXkMHNseEiJF9mACUqdodr0elohKTDZdLH5Yttx7XUPOXS874-ZkouUVtZhNRQHg5EhP8FVGo51-vqIQQ8wnPb2PaF-K6cODyULXx8minUt8uz9pZ8xlM2YZDt0oq7a1TrKA0SQ/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO6Kgyf2iPLVeousocBMSS-R77gRagOjSEgIZXiAqe-Bsbws5cuRUhgjenyDIwM2xcQrFBANsjLrQgoh-HGxtNFdHcCrX5d95ix25E6hFhSCfCaYHqQVMPssnBpKMXbsH6gkJ0c84lchg/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhRLE2WXsJ7LOSVhZYXmXgsynycLlDug1Gf-tZblfWgQYObdNG4JptyNCLSK84sfZuCFXa8LyGjwNilsoJM5Pr3sBoK1UHT0uMcv67bv3cQD7POs9aUXb2lKGvvf10c1q5o8PQqt_1wc/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhRLE2WXsJ7LOSVhZYXmXgsynycLlDug1Gf-tZblfWgQYObdNG4JptyNCLSK84sfZuCFXa8LyGjwNilsoJM5Pr3sBoK1UHT0uMcv67bv3cQD7POs9aUXb2lKGvvf10c1q5o8PQqt_1wc/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzwtDqnc7VmEpnOqJ1gZLe2E4oDp_X3g8sZAX4TjD8WGjYER92Rl6WRpn_DQojourPB-v3w9bhizcOVYgcYBORJbN73luswZdDJ2HbKGUDnR0Lb0USx1sA17T1FVyi-iLxIvL8FceXR0o/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRFrm-TvyAfqWRZKZSTmZFcfLdXv-ValIZb5O05DlbRDnhUgOvryTl8aICQli2iGk4pr42OsXcULE5ULI_7pc7jC0AopGiQT_rgvnKk3NCpb_ZwgRfWUPBSbm24f08q95vYN0ANbK2Gk/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS6IfqyT6sEMIGGWriJoqGwSLTL_cuBBVTCNin-hH9Q4VJvyhtBdP4od98zAstHQDFmj9Z_IA1gU3x2mAwL8ewgD2ApMLHxw4OFqkTSQ_2m0_uuyj_98_chs-bSE4cpl7SSK1CYf03J_0/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li>
<a href="#">Tutorials</a>
<div class="tutorials">
<ul class="left">
<li><a href="#">Javascript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="right">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Actionscript</a></li>
</ul>
<div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href="#">Links</a> <ul>
<li><a href="#">Programming</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">My websites</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Cool stuff</a></li>
<li><a href="#">Sitebase</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li>
<a href="#">Subscribe Now</a>
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MYBLOGGERLAB', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</li>
</ul>
10. Save Template Anda
Keterangan :
Untuk menggunakan menu ini dengan baik sangat dibutuhkan pengalaman Anda tentang HTML.
Artikel Terkait
Category Article Blogger Hack
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)