Cara Buat Menu Dropdown di Bawah Header

Tweet

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 :

1. Didisain dengan background dan warna menu yang sangat stailis
2. Didisain juga dengan gambar dan link
3. dan juga didisain dengan kotak berlangganan artikel lewat email
4. 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.

DEMO

Ok langsung saja ikuti instruksi dibawah ini dengan baik, sebelum itu backup dahulu template Anda.

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML dan jangan lupa centang Expand Template Widget
3. 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/AVvXsEij_rDLJyGCnlWsKgo7yxrr5lcgk36c6NXXzHqJj6UYQGqgqJOrhdC2_ccL8wB46xyUU2P2ayjVSyJ9DxjpMq_otybphpK5oxX1p4aWR-POLtGLSlvKxDR_gMvEFZkrc3-VLdvq3hBhHY0/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/AVvXsEhmGaZCvccCJv8T_ReHqvtJW1jR_D6SJlUcjA9KTbyWblEOwoE2RVfloIXkOnr8qX2DKBs7oeF6KnTwVXyzKQb4DlT0R8mf1UFg7v6nF-w8rnn7GHoAQ5CIBw2kn-QJxZ6k7iA4VYOIA1g/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/AVvXsEg4vYMOslmQc1CNwT9Drh1Lu0Px8bHkC0P5GvrWqXjVbR7HWY-0UrcDOV1pNpcN2O-BGJpv3SOev7mzs0mqGF7iBPneJNGSfZZN6-s-ESK5O8tjJw5J0QzQnpWtWzH9hqjNR0iOaRouAdY/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/AVvXsEhnnp40jcCL0VEbaGKOmmSFBiK-zZk3139dhES8nUPquBfRQ7JLUjOdIG822hAeQ-FxDAJiDjAK3qYfZJWyWZXyPfpT8Lxp274YFTLHaUYoD29i27m1eKIvNgUVXpGzjv_6pqy9DS7MAa4/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/AVvXsEhnnp40jcCL0VEbaGKOmmSFBiK-zZk3139dhES8nUPquBfRQ7JLUjOdIG822hAeQ-FxDAJiDjAK3qYfZJWyWZXyPfpT8Lxp274YFTLHaUYoD29i27m1eKIvNgUVXpGzjv_6pqy9DS7MAa4/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vYMOslmQc1CNwT9Drh1Lu0Px8bHkC0P5GvrWqXjVbR7HWY-0UrcDOV1pNpcN2O-BGJpv3SOev7mzs0mqGF7iBPneJNGSfZZN6-s-ESK5O8tjJw5J0QzQnpWtWzH9hqjNR0iOaRouAdY/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/AVvXsEhnnp40jcCL0VEbaGKOmmSFBiK-zZk3139dhES8nUPquBfRQ7JLUjOdIG822hAeQ-FxDAJiDjAK3qYfZJWyWZXyPfpT8Lxp274YFTLHaUYoD29i27m1eKIvNgUVXpGzjv_6pqy9DS7MAa4/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/AVvXsEij_rDLJyGCnlWsKgo7yxrr5lcgk36c6NXXzHqJj6UYQGqgqJOrhdC2_ccL8wB46xyUU2P2ayjVSyJ9DxjpMq_otybphpK5oxX1p4aWR-POLtGLSlvKxDR_gMvEFZkrc3-VLdvq3hBhHY0/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/AVvXsEihdBxekh0JVpS4oNa6IkgWSJkzcDL-6U8VHEmo-QYBg05BuOAaOCCZBTSwqCoBdrL44kBRbgzGc9tD7xMVo4eoFwhIFJv4lXazVb_rlWrFe4oTno9yS2HsMTa0LF4LWnOCbQ-F6xYZo0Y/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/AVvXsEhdGAascAh98SDxU1hp9Z-F2F3DDx_kaQfjFgHIc-TUZPBaG0Mg0r7D5uYcCMEGOblhqC841MAoZmSDkicHkEK1opXH40_zTjFA5qz-TbisM5wwSDvkP_e2_ujAiYrROnN71WL4qvarfKs/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/AVvXsEhfuFjV5rCjHFLDM14n2oZoUmWFsfK81C6yipQfJGkab4nqrtfjYBkmIRRs-D04gy9EaBVfKTa2qK92Z-Z9wXIOAkf4T45ChhLlVET2d6CbhpZu5lhovCGms29kM-5rdhV7rkgNahY5Rn0/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/AVvXsEhfuFjV5rCjHFLDM14n2oZoUmWFsfK81C6yipQfJGkab4nqrtfjYBkmIRRs-D04gy9EaBVfKTa2qK92Z-Z9wXIOAkf4T45ChhLlVET2d6CbhpZu5lhovCGms29kM-5rdhV7rkgNahY5Rn0/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/AVvXsEgOmMbxPT1TbdxFAiHlEpaA5iYhkAjwWku_bpgeKkjQQZRFSHcDEf8cq4cUAYdV3zPmnCsfDayE1Dzcm5_TCF37FvX7nRuSD72Bc9xr-tluojdoTAXKrVbeczVVEcHWtQ57HAQpYRs_KhI/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/AVvXsEgmg0YrVpSgEaIZc0FClurI8Xoy4kDMtQAMcY5i7-7WV2NngCVmP_qzI9WmA2YBZH4fP2XlkMhVLXY5GDsy5XCV_6UbTFWAnac0HHv2bX32dSBdfWiSSwVjAErgp7RudBesxmCB2gXSsRU/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/AVvXsEiU2kLacDYiud_YcMEuMMepHxy1yRQoTqMZ-V3qKjecSAHCpmjy8pAFNQG5ShnKurLBCp89uLKA9DOMj8cenaPpGKTubEGKFt-oEyduyCAnEJLzA_EK2BfGw15ct0kH0sRZUkd0fwAQTPA/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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" 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

Keterangan :
Untuk menggunakan menu ini dengan baik sangat dibutuhkan pengalaman Anda tentang HTML.