Cara Membuat Menu Drop Down Keren Di Atas Header

Author hans_mjlk - -

Home » Blogging » Cara Membuat Menu Drop Down Keren Di Atas Header

Salam Hangat Semuanya,kita jumpa lagi Dalam tutorial berikutnya yaitu tentang Cara Membuat Menu Drop Down Di Atas Header,meski sebelumnya saya sempat membahas tentang cara membuat menu drop down di blog,namun kali ini sedikit berbeda sebagai lanjutan dari postingan kemarin yaitu menu ini bisa di simpan di sesuai keinginan kita tepatnya di atas atau di bawah menu header,buta sobatyang ingin mencobanya silahkan perhatikan tutorialnya berikut ini.

1. Seperti biasa langkah pertama sobat login dulu ke akun sobat.
2. Kemudin pilih bagian Template,dan pilih Edit HTML.
3. Cari kode ]]></b:skin>,(gunakan CTRL+F supaya lebih mudah dalam pencarian).
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUqUB99KUhD_msav10-nj11U3taaQgDvT0nbmGp2zAnX8rtpxRTIezXq0h-hUB3H5VE3g6VaiyToypNCPls2cetkiFwyCE8kqbG7jdRalvOHevE_U0czVaNJVL1jFFLqTCrty6pmue5gE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyY0ORFny0s8NC5zRrkfltrQLqyBBrp2CHLCFgr1fyhZdmrJC10Dre0Ly9tnYYyweCqiu64oyO6sOAUKH3lQ_gsOApSZRBhmV3YfsMIWkRnNEicS5lx73l2cNlKroQ4Vh19mwdlm8kOk/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}

5. Kemudian pastekan scrip di bawah ini sesuai dengan keinginan sobat.
Kode <header> jika menu ingin di tempatkan di atas header
Kode </header> jika menu ingin di tempatkan 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='#'>Daftar Isi</a></li>
<li><a class='trigger'>Contact </a><br />
<ul>
<li><a href='#'>Folder 1</a></li>
<li class='hr'/><br />
<li><a href='#'>Folder 2</a></li>
<br />
<li><a href='#'>Folder 3</a></li>
<br />
</ul>
</li>
<li><a href='#'>Blogging</a></li>
<li><a class='trigger'>Tips dan Trik</a><br />
<ul>
<li><a href='#'>Folder 1</a></li>
<li class='hr'/><br />
<li><a href='#'>Folder 2</a></li>
<br />
<li class='hr'/><br />
<li><a href='#'>Folder 3</a></li>
<br />
<li class='hr'/><br />
</ul>
</li>
<li><a class='trigger'>Kategori</a><br />
<ul>
<li><a href='#'>Folder 1</a></li>
<li class='hr'/><br />
<li><a href='#'>Folder 2</a></li>
<br />
<li class='hr'/><br />
<li><a href='#'>Folder 3</a></li>
<br />
<li class='hr'/><br />
<li><a href='#'>Folder 4</a></li>
<br />
<li class='hr'/><br />
<li><a href='#'>Folder 5</a></li>
<br />
<br />
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='hansmjlk.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' 

value='http://hsndmjlk.blogspot.com'/><br />
<input id='search-box' name='q' onblur='if(this.value=='')

this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)

this.value='';' 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'/><br />
</form>
</div>
</div>
<br class='clearit'/></div>
<div 

style='clear:both;'/>
</div>

keterangaan
untuk yang bertuliskan tanda # ganti dengan url label sobat
untuk yang bertuliskan folder ganti sesuai selera sobat

6. Kemudian simpan template dan lihat hasilnya.

Demikina tutorial dari saya terima kasih.

Blogging

12 Responses so far.

Unknown says:

16 Maret 2014 pukul 04.46

Saya tertarik dengan blog ini, bisakah anda mengedit blog saya seperti ini ?
pliss, ini buat ujian praktek ku
Amin says:

30 Maret 2014 pukul 06.20

kode ke-2 itu maksudnya dibawah / diatas hearder bang?

mampir ksini jg y, follback jg Ya hehe
http://android-mbois.blogspot.com/
Unknown says:

15 April 2014 pukul 20.17

kodenya kok gk ada ya om di blog saya
Ade Putra Blog says:

23 Mei 2014 pukul 02.13

wah keren artikelnya gan
Bemanfaat banget..
Di tunggu artikel selanjutnya..
Sceneries says:

4 Desember 2014 pukul 06.35

yang script tuh dicopy dimana bang?
NURMISUARI says:

13 Desember 2014 pukul 07.55

Mantap gan! :D
Obat Kanker Payudara says:

21 April 2015 pukul 20.31

Terimakasih buat artikelnya, mantab sob, menambah pengetahuan, bermanfaat..
Unknown says:

5 Februari 2016 pukul 09.12

template nya keren
kaktegar says:

24 April 2016 pukul 21.46

manteb polllll. by : http://tulisan-kaktegar.blogspot.co.id/2014/07/cara-membuat-menu-navigasi-seperti-fast.html
Unknown says:

20 Oktober 2016 pukul 21.57

Mantap Gan BlogNya Apakah Gw boleh Minta Link Donwload Template Nya Agan
Unknown says:

24 Januari 2017 pukul 03.33

gan kalo boleh minta tamplate yg ini dong lg belajar bikin blog gan hehehehehehee mohon petunjuk.......
Unknown says:

23 Maret 2017 pukul 05.10

Keren..! Makasih banyak. Kunjungi blogku di http://nikaita2182.blogspot.co.id