→ → → Cara Membuat Menu Drop Down di Bawah Header Blog

Cara Membuat Menu Drop Down di Bawah Header Blog

Menu drop down adalah adalah menu pada blog yang yang jika di sentuh memunculkan menu-menu yang lain. Menu ini banyak macamnya, ada yang dipasang pada header blog, sidebar blog ataupun pada tempat-tempat yang lain.
Kali ini kita akan membahas cara membuat menu drop down secara otomatis yang terletak pada header blog, tepatnya dibawah header blog. Seperti menu header yang ada pada “PSYCHOLOGYMANIA” ini.
Langsung saja kita coba sobat: 
  1. Masuk pada Design --- edit HTML 
  2. Jangan lupa kopi kode HTML sobat terlebih dahulu, jangan sampai ada kesalahan 
  3. Beri tanda centang pada “Expand Widget Templates ” 
  4. Kopi paste kode dibawah ini tepat diatas ]]></b:skin>
#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNNmyM-LDX4EXjV5HhhakzdcZE7Iwjc07nLYGXpD0vbV3egRyZz7s0AxLE55wdPDsVQyHoxvhqkK0UUuHns1NUrmFTck3YMiTDis9OnLAwzGF7MMS2p4-Jeevs1ZA0cv549l6hjMq5d_o/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiZ6vu9DlZMyZ6R4CeWvna2S47ezQVmde7jXz0cH3H-T3Xi0jiRihfMhGm3_WDOmShPmtLzK4RndkV_-w_Z4uq_18BT0J4UoijXoIPqBxActD8FoXUCcTrsQy0rLUqu0kfB7n8aDg7Z2Y/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtaVTmZPhTeLg3WTUc9Gvrh2vO9aBeCA6DvDhLrK2OM-2tY6CuVO2PY_TRlNg7q6a55yhbiDegwCBbpzANSRSYFciwXJdK7ZT3c0nvgy_aGqnynlvQd-U0hxosuMjWTTNs8fjHhYmX5KU/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtaVTmZPhTeLg3WTUc9Gvrh2vO9aBeCA6DvDhLrK2OM-2tY6CuVO2PY_TRlNg7q6a55yhbiDegwCBbpzANSRSYFciwXJdK7ZT3c0nvgy_aGqnynlvQd-U0hxosuMjWTTNs8fjHhYmX5KU/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

5.    Cari Kode <div id='content-wrapper'>
6.    Kopi paste kode dibawah ini tepat dibawah kode <div id='content-wrapper'>
<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
</ul>

<div style='float:right;margin-right:20px;'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=pbtemplates'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCGtmQ8gySF5IrEgE4RJnvaWvh88n9zfI_iagzR_RXe6_Y92Qa8Fx1-VotDGEu1xytg8kKFQSSZ1pMR2q6VeKh6fgjDB49D7QJvyshdJafM54xi65CYscyPe6BHzM7C6XI6DncnetwTbTe/'/></a>
<a href='http://feeds.feedburner.com/pbtemplates'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiskwc_OTUu4E4Y7zRrAK6gyDjtAhRJ04mol-D4FrKeMOj8SWVRfPAm4hMWnHahyzE5HQ5Rj6pXlvTiYyokn1PvuELIsOiW-DpmHYyJxzPshdqzs9S9kKcsU7N2RKe_UTRFe9nIH5YDvGM7/'/></a>
<a href='http://www.twitter.com/btipandtrick'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnv4lLRNVa6l2ndxD2mjL1qkGjw_8ogUjC4aiqr2W_tzojDOVRcIAWSjKLkUdKBxoFJgM948LhOm_HDqmrVNE4N_p-McYtYXZvQ2DCy2M7QipOYakUPPrZcs-JdNy9n27aH6NuOrCrOOwy/'/></a>
<a href='mailto:123@abc.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPYtiUBLzjAMu_jhgHrNJij0edMUCCUJ2C8WX_3o8ehjDp-RNZZpC1TOSYV9Z_hc8sA17qe2rrKk7GAoR22ufXIFdgfR3oTRIwhQaF-_BLWTfZeszXe9RItYuqKjvcwu7AMAl8RbxnanZ6/'/></a>
</div>

</div>
</div>

<div class='clear'/>


7.   Ganti kode-kode “'Your-Link-Here” dengan link yang ingin sobat masukkan dan “Link-Name” dengan nama link yang sobat inginkan.
8.   Simpan template, dan lihat hasilnya…. 

Selamat mencoba semoga sukses…~~~
Sumber : http://www.psychologymania.com/2011/09/cara-membuat-menu-drop-down-di-bawah.html

1 Komentar untuk "Cara Membuat Menu Drop Down di Bawah Header Blog"

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top