Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» » Cara Buat Menu Dropdown di Bawah Header

Cara Buat Menu Dropdown di Bawah Header


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.
Mega Dropdown
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.


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(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/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(http://1.bp.blogspot.com/-0mKMqQrHeUo/UGck1O8Ip6I/AAAAAAAAFr4/KUFcGh_ZnRs/s1600/arrow_up.png) repeat-x scroll 0 0;
 position: absolute;
 top: 12px;
 right: 10px;
}
.dropmenu li  a:hover span{
 background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/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(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/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(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
 background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/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(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/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(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/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="http://4.bp.blogspot.com/-brA1qvvpyXg/UGcoWTlHWLI/AAAAAAAAFsw/jUSjTHOvh88/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="http://1.bp.blogspot.com/-vhdwdqNcO7g/UGcoXnXac1I/AAAAAAAAFs4/eo2_Cl4GaH8/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="http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/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="http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/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="http://4.bp.blogspot.com/-umDs7rKTFZQ/UGcocADb7ZI/AAAAAAAAFtQ/1dTOjPwJc0M/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="http://3.bp.blogspot.com/-AxTQpVFuxbs/UGcodrtWdqI/AAAAAAAAFtY/MA8K3gCE41w/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="http://2.bp.blogspot.com/-KFHxELM1ei0/UGcoeqDaqqI/AAAAAAAAFtc/2jLBgm53Ws0/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. 
Odii Siitohang
Judul: Cara Buat Menu Dropdown di Bawah Header;
Ditulis oleh: Unknown;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang Cara Buat Menu Dropdown di Bawah Header dengan url http://d-copy.blogspot.com/2012/10/buat-menu-mega-dropdown-di-bawah-header.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[42] Komentar untuk Cara Buat Menu Dropdown di Bawah Header:
  1. mantab brow...
    http://foruminformasiteknologi.blogspot.com/

    ReplyDelete
  2. menunya biar seukuran sama blognya gimana gan ?

    soalnya ni ae terapin di www.kuasinfo.com kok jadi panjang nggak seperti demonya ??

    ReplyDelete
  3. terima kasih yah tutorial blognya...
    saya jadi bisa nge-blogging keren gxc berantakan..

    backlink: http://hilbramkurnia3.blogspot.com

    ReplyDelete
  4. gan gimana cara geser menunya agak ketengah biar ndk terlalu mepet,..
    mohon bantuannya gan

    ReplyDelete
  5. Halo terimakasih atas panguan anda.
    Tapi, hasilnya kok di atas header, bukan di bawahnya?
    http://betabisa.blogspot.com

    Sekali lagi, thanks, ya?

    ReplyDelete
    Replies
    1. Sudah saya perhatikan. Lalu, saya apakan?
      Soalnya, kode yang terlihat di template, beda dengan yang anda contohkan. thx

      Delete
    2. Sebelumnya, Selamat Hari Natal dan Tahun Baru 2013

      Delete
  6. THX GAN BERMANFAAT BGT NIH ARTIKEL NYA ....

    Numpang Promo :D

    http://yogie-56.blogspot.com/

    ReplyDelete
  7. bro, gmna caranya posting artikel di menu atwpun di sub menunya...??? mohon pncerahannya...

    ReplyDelete
  8. info yg sangat menarik dan bermanfaat bagi saya,, kunjungi balik gan www.ankurniawan.blogspot.com

    ReplyDelete
  9. gan gimana nih, aku ga ngerti step no 7 nya ga bisa? mungkin templatenya beda gan... ada saran pake template awal apa nih???

    ReplyDelete
    Replies
    1. Itu HTML yang mirip sob.

      Lebih memudahkan cari ini aja : < div id=' header-wrapper '>

      Tanpa spasi.

      Delete
  10. gan, gmana cara agan buat menu diatas, seperti ...
    blogger hack, bloger widged,dls.. di dalam menu tersebut kan ada halaman nya lagi sih kalo kita klik. nah gmana caranya,
    soalnya aku liat di google semuanya pake link . jadi kita harus buat link dulu terus dimasukan ke skrip itu, nah aku bingung masalah link itu
    tolong ya gan....

    ReplyDelete
    Replies
    1. Gunakan Contact Us sob, agar lebih mudah memudahkan komunikasi.

      Delete
  11. mantab gan..
    kunjungi balik gan
    http://kakashitian.blogspot.com/

    ReplyDelete
  12. mantab gan..
    kunjungi balik gan
    http://kakashitian.blogspot.com/

    ReplyDelete
  13. makasih gan atas tutornya,,,
    langsung sedot,,,

    http://www.ivanslankers.com/

    ReplyDelete
  14. terimakasih atas infonya ,jangan lupa juga ya mampir ke http://cyberbusinessinstitute.com/

    ReplyDelete
  15. setelah lihat demo nya...ternyata keren banget bang tab menu nya... ringan banget... saya suka..saya suka...

    ReplyDelete
  16. gan, ane pingin banget ni menu, tpi kok gk bisa..
    jd nya malah kyk tulisan biasa, mohon pencerahannya
    thx

    ReplyDelete
  17. makasih ifonya gan, tapi klo mau ganti warnanya gimana??

    ReplyDelete
  18. Replies
    1. \backgroundnya. sama klo mau nurunin dikit gimana yah? coba liat blog saya. http://wildanlsfs.blogspot.com

      Delete
    2. Itu karena perintah CSSnya sama dengan perintah CSS bawaan template sobat, hasilnya seperti itu.

      Tapi sebaiknya tidak perlu diubah lagi, karen jadi sesuai menu barnya dengan template sobat.

      Delete
  19. MAAF gan.. kode ini div id='header-wrapper' gak ada diblog saya gmna ???

    ReplyDelete
  20. Pasti ada @ogy risky juwan toro, mungkin kamu yg salah find kodenya sob.

    ReplyDelete
  21. ini yg berwarna apa yg diganti ? tlg yg jelas

    ReplyDelete
  22. pas disorot submenunya, kok tdk bisa ya..
    submenu lgsg hilang

    ReplyDelete
  23. MANTAP HABIS INFONYA...
    SALAM SILAHTURAHMI N KENAL GAN..
    TUKERAN LINK YUK..
    JIKA AGAN BERSEDIA MHON KONFIRMASI DNGAN BERKOMENTAR DI BLOG ANA..
    http://kumpulantipshebat.blogspot.com/

    ReplyDelete
  24. waaaaaaaaaa banyak sekali....saya pusing cari-cari code div id='header-wrapper

    ReplyDelete
  25. backgroundnya, kan warna biru tuh. n klo mau di turunin dikit gimana yah? see my blog http://wildanlsfs.blogspot.com

    ReplyDelete
  26. Makasih banget gan,, work nih,,, visit my blog http://yadi000.blogspot.com/

    ReplyDelete
  27. gan, bgaimana supaya itu menu Home rata kirinya sejajar dengan judul header, mohon bantuannya?
    http://nazcules.blogspot.com

    ReplyDelete

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template