Teropong Kecil : Cara Buat Menu DropDown di Bawah Header

Halo Sahabat Bayoe Semua,

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, dropdown ini bukan admin yang membuatnya.

Jika tulisan ini bermanfaat bagi anda, kami sungguh berterima kasih jika anda bersedia membantu kami dengan mengklik, Yang ini ,yang ini, yang ini atau yang ini. satu kali anda mengklik sungguh berharga bagi kami

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

Oke Langsung saja ya ikuti cara-caranya

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{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigFfb6XIY-LUvvQYj_y8mTXtPnARrg8bDdjNS30vlc3tTYtPteDdS0hyS4lacJL2l8tctxB4zJ0Rm0i-QhhwG2e5XTkbio6-A1WtGmev-C0nT17Zy1hd9td6AXHvsUCe14QK02B11Ilbs/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/AVvXsEicfgyr_mQ1TX0okNAplbd31_5GikmhiDnaHSZbKPcxSxBS5Fa-c6ljvcvh1GVV6YXvikYYXVeZ1AmCzPxRls4YlaQcKSpOetUjx-blhZc-rp0MoluxiT4CYYGir-iKPXn1m9-9W5w3Iuk/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/AVvXsEhF4JiiVU8_SYRYuV4_yDjbrfnLP5wem5IvSa3ROwSYSminwOF1IKFr_prVQ6u9Zui_PTIbsqry0Rzf-4X4BNyvyMCHhtBJIo-X-4iPi0Gq6uGyMlT6EGiQX_pediAGpMDCjcy-Q7woJDk/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/AVvXsEiXXv0qlJi_z6edgNSQSHbA3hTB79FMdL2eCyaZBbIsvi6U9QSyQIemSNxQjOpTlu7Qimq3VR5Ha934ayaa-01UMADXVtDF1J05T3wN7isxfPJ_FWEMG3rKivA0L1EDpeG3FvRtvNrm1Wk/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/AVvXsEiXXv0qlJi_z6edgNSQSHbA3hTB79FMdL2eCyaZBbIsvi6U9QSyQIemSNxQjOpTlu7Qimq3VR5Ha934ayaa-01UMADXVtDF1J05T3wN7isxfPJ_FWEMG3rKivA0L1EDpeG3FvRtvNrm1Wk/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4JiiVU8_SYRYuV4_yDjbrfnLP5wem5IvSa3ROwSYSminwOF1IKFr_prVQ6u9Zui_PTIbsqry0Rzf-4X4BNyvyMCHhtBJIo-X-4iPi0Gq6uGyMlT6EGiQX_pediAGpMDCjcy-Q7woJDk/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/AVvXsEiXXv0qlJi_z6edgNSQSHbA3hTB79FMdL2eCyaZBbIsvi6U9QSyQIemSNxQjOpTlu7Qimq3VR5Ha934ayaa-01UMADXVtDF1J05T3wN7isxfPJ_FWEMG3rKivA0L1EDpeG3FvRtvNrm1Wk/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/AVvXsEigFfb6XIY-LUvvQYj_y8mTXtPnARrg8bDdjNS30vlc3tTYtPteDdS0hyS4lacJL2l8tctxB4zJ0Rm0i-QhhwG2e5XTkbio6-A1WtGmev-C0nT17Zy1hd9td6AXHvsUCe14QK02B11Ilbs/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;}

5. Cari kode dibawah ini :

</head>

6. Pastekan kode dibawah ini diatasnya :

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu();
});
</script>

7. Cari kode yang mirip seperti pada kode dibawah ini :

<div id='header-wrapper'>
<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>

8. Diatasnya pastekan kode dibawah ini :

<ul id="nav-one" class="dropmenu">
<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/AVvXsEjs6NUHPMTfvheW9s1fvNM9GhKIdnwb_3WoGbM7LaMUsnDnWoDFWmFeKlODSJgJjdKUcB-0Tl4HZlrOIHSx1c_42Bp39zu4ocwRfrufHZg5kr7sMEzsBB-SyYwy6TtZRyOmvML1R8OamYw/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/AVvXsEgkrz4ektYVsFRWINt2XknMTnpf9WzXx4oiRl54_j8lEl64X4_9X14WRH2JuR3HzYmMQWgt04ObAkuR3N9SbUk8IUcYedtYSFDtKbwNAlIE04iAttQu-AqaSeaEGls1S1Vs0Rf9_QuE_aY/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/AVvXsEga7assZpJtBcGWlyAX-ZISuqw0FnaxHiw2TYpsVtUXID-d-XnBKFw4hO8VeB05GddR4AJioqeQVyh0dSSPLovVR2e8x5sHgQNcsEr4iohhL4dTSja8pXeTq2Sr6aTwOrZYXSPL9OLciBk/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/AVvXsEga7assZpJtBcGWlyAX-ZISuqw0FnaxHiw2TYpsVtUXID-d-XnBKFw4hO8VeB05GddR4AJioqeQVyh0dSSPLovVR2e8x5sHgQNcsEr4iohhL4dTSja8pXeTq2Sr6aTwOrZYXSPL9OLciBk/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/AVvXsEiyctkVX4lxb1UGVItDwiBCjBiv2BWrISojdEkOESUEUg7GALUGV-YFHhVjfr1iF-sTKGfL1uuTXTZHvSs5r-Dji6hw484QDm7yailBxOmeasCKTR4gcQ7xU9ANi4aXMLG4shSRAK-8pMc/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/AVvXsEininVVAnx20SOyFWehccLci6UVQT23lICPmUbmWCah-JpaW0r7ERD3sAWuOjpdcOXfC1SviiqzR2NlmkxAddvXnwAgH7ymBYeeaAlRGrCXO6w2rIafBfQmnV6_fR3-xJt46-VPKIAQgRE/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/AVvXsEg38kUSh0R12oy4YGI9k0DT428dsFYzv7ETzREkx_4GcGQfHDTHDk6KUGLcY5ERhHT6xhKcXKE6RwRVK2olTYzZ0SUR9Oul-5OB1nwUQxg8jRs_8OP4v2Lb7BHD8M5Ak0XOT3GZkWFI0PQ/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>

9. Ganti kode-kode yang diwarnai pada kode diatas.
10. Save Template Anda

Klik disini jika ingin mengetahui hal yang lain tentang Blog

Jika tulisan ini bermanfaat bagi anda, kami sungguh berterima kasih jika anda bersedia membantu kami dengan mengklik, Yang ini ,yang ini, yang ini atau yang ini. satu kali anda mengklik sungguh berharga bagi kami

semoga Informasi tersebut bermanfaat untuk anda.Silahkan Bertanya jika ada yang kurang dimengerti ^^.
Jangan lupa berkunjung lagi dan ikuti ya web ini gan.

Sabtu, 02 Maret 2013

Cara Buat Menu DropDown di Bawah Header

Popular Posts

Mengenai Saya

Bagaimana Tampilan Website Ini?

Translate

Cari Disini

Pengikut

Label