Membuat Menu Drop down DiBawah Header Yang Keren

Alhamdulillah pada kesempatan ini Anrhy chipaz kan share tentang Cara Membuat Menu Drop down Di Bawah Header Yang Keren di bawah header.
Dengan Menu Drop down tersebut pengunjung dapat mudah mencari artikel yang mereka inginkan dan admin juga gampang untuk merapikan linknya, Menu Drop down tersebut bisa di pasang di atas atau di bawah header dan cara pemasangannya juga lumayan simpel. eits hampir lupa Menu Drop down ini mempunyai kotak search di sisi kanan Menu Drop down tersebut,
jika sobat ingin melihat demonya seperti gambar di bawah ini dan zobat bisa lihat seperti yang saya pake di bawah header blogku



Jika zobat ingin memasang Menu Drop down tersebut langsung saja kita simak langka-langkanya berikut ini!
  1. Seperti biasa kamu logging ke akun blogger kamu
  2. Masuk ke template
  3. Pilih Edit HTML
  4. Gunakan control control-F untuk memudahkan pencarian 
  5. Cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
    /* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
  6. Selanjutnya zobat kode <header> atau </header>
  7. patekan kode di bawah ini tepat di atas <header> atau di bawah </header>
    • <header> untuk menempatkan Menu di atas header
    • </header> untuk menempatkan Menu di bawah header

    <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
    <li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
    <li><a class='trigger'>Contact Us</a>
    <ul>
    <li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
    <li class='hr'/>
    <li><a href='http://twitter.com/Anrhy.chipaz' target='new'>Twitter</a></li>
    <li><a href='http://www.myspace.com/andili' target='new'>Contact on Myspace</a></li>
    <li><a href='http://www.facebook.com/anrhycpz' target='new'>anrhy facebook</a></li>
    </ul>
    </li>
    <li><a href='http://Anrhy.blogspot.com' target='new'>anrhy chipaz</a></li>
    <li><a class='trigger'>Tips dan Trik</a>
    <ul>
    <li><a href='#'>Komputer</a></li>
    <li class='hr'/>
    <li><a href='#'>Blogspot</a></li>
    <li class='hr'/>
    <li><a href='#'>Facebook</a></li>
    <li class='hr'/>
    </ul>
    </li>
    <li><a class='trigger'>Kategori</a>
    <ul>
    <li><a href='#'>TV Online</a></li>
    <li class='hr'/>
    <li><a href='#'>Komputer</a></li>
    <li class='hr'/>
    <li><a href='#'>Desain Grafis</a></li>
    <li class='hr'/>
    <li><a href='#'>Game</a></li>
    <li class='hr'/>
    <li><a href='#'>Microsoft</a></li>
    <li class='hr'/>
    <li><a href='#i'>Software APP</a></li>
    <li class='hr'/>
    <li><a href='#'>Software Program</a></li>
    </ul>
    </li>
    </ul> <div class='menusearch'>
    <div style='float:right;padding:8px 8px 0 0;'>
    <form action='http://anrhy.blogspot.com/search' method='get' target=''>
    <input name='sitesearch' style='display:none;' value='http:/anrhy.blogspot.com'/>
    <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
    </form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
    Ket:
  1. Kode berwarna merah adalah Url tujuan
  2. Kode berwarna hitam tebal adalah kalimat yang tampil pada menu dropdown,isi sesuai zobat
8.  jika semuaya selesai simpan template zobat lihat hasilnya bagaimana.
Selamat mencoba.
Previous
Next Post »

8 komentar

Click here for komentar
April 30, 2013 at 7:17 PM ×

wah, pagi2 berkunjung baca artikel yang bagus, terima kasih gan sudah berbagi...:)

Balas
avatar
admin
May 1, 2013 at 4:49 AM ×

maksi zob atas kunjugannya!

Balas
avatar
admin
May 1, 2013 at 6:21 AM ×

zulfradana aishiteru @ ok thans kerja smax!

Balas
avatar
admin
August 23, 2013 at 6:51 AM ×

setelah 4 jam bereksperimen dengan kode dari mas bro,akhirnya selesai juga buat menu drop down nya,tapi qu mau tanya untuk menghapus menu search nya gmana???dah coba2 qu nyerah ,,,salah terus,,,mohon pencerahan
oiya kunjungi blog qu untuk liat hasilnya

Balas
avatar
admin
November 3, 2013 at 7:06 PM ×

untuk hapus menu searchnya tinggal mauk ke skript htmlnya dan hapus mulai dari <div class='menusearch'> sampai terakhir tapi tinggalkan penutup </div> , </div>

Balas
avatar
admin
January 30, 2015 at 2:58 PM ×

terima kasih gan artikelnya sangat membantu.

Balas
avatar
admin
February 6, 2015 at 5:48 PM ×

terimakasih banyak sob, mantab sekali pokoknya...

Balas
avatar
admin

Terima telah berkunjung dan meniggalkan komentar di blog sederhana ini..!

NB :
1. Jangan berkomentar SPAM
2. Jangan meninggalakan LINK aktif karna otomatis akan terhapus.
Show Conversion Code Hide Conversion Code Show Emoticon Hide Emoticon

Thanks for your comment
Widget by