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/AVvXsEg6elh6tAKUrLBT1yr0hBviqRcTQ-aIbc9rsgI7eBQ0DahBoWckg-YZQQSiHIsn0rwrNZNFxDUVsWWteXMTo56E3xf73b13NYVyfnIhzBIFwbb1NK-pzXHgGhNOFVjLKAiCD1dcjHeb5b2i/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/AVvXsEgCvgN7inPmZSkBhk5pAkJDCqYverVTBIL8IjTC7gd4po0Nel_ermg2jfFJ5dzWGlEb0gWO3JWpaWmC5ZfFwmG0bbv-E_48Ih_Im3EXHVVIvKOZ4Bf4FnlSuoObeslnqmfJdUa6BJVjCMu4/) 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/AVvXsEgqjFYR8zMg0K7q5nhD1KqezajNOX4Zgulfy6zH_5r-24KLyhf7sioFMDA4AIuzKhT3itN7slwJsMJuArnDBgHKLDgzqAHnPweEfoCIO_OFB4ERawY3gG3TBWEZ1rL_hemlcKkSQpt_7XRB/) 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/AVvXsEgqjFYR8zMg0K7q5nhD1KqezajNOX4Zgulfy6zH_5r-24KLyhf7sioFMDA4AIuzKhT3itN7slwJsMJuArnDBgHKLDgzqAHnPweEfoCIO_OFB4ERawY3gG3TBWEZ1rL_hemlcKkSQpt_7XRB/) 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/AVvXsEjVoI-3g6Dvu_gA0o3SWxoqvw7uPjcsfDz3gh7zDH8Q6KEAiVzY9pwjbr-Pg-CJAnBTd9yViVxupbhDW2AOSoxvxjHc-93hYU2g35IBiunDl2b881er5tj1qt9Mu9Gw_G2fMNUkasi0WFk8/'/></a>
<a href='http://feeds.feedburner.com/pbtemplates'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG0MLP5g0HA1j1w58YyCHtLNPIBCicwayCu9TKkS_EuW3fEDLoFHrpS0akl2Rz9bnKN0xJZa0m81GUkG5Kd1t2UOXWMqImNHnRgUVg_CJGYJeyxmFoZ7AEAVsAgvtFR9Y7sPx1J5ssC7zo/'/></a>
<a href='http://www.twitter.com/btipandtrick'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJ0bpwvyceAB6h5L3plTXrpuWmbSJxTtCvrR_zKC1VxjKBsowbZJ6p2-ZevfETHSeCJR99hbljJ0_wDe8b0OMl78ReTr_wLvtSbU8Z58k3MaongGVJ8tRrv1SDT0D68vswqgISXvP_-3a/'/></a>
<a href='mailto:123@abc.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyZHwsKrpnExVcd5-CQ6sD3l_SqYcD55jOhnrP5FEoQb7GLFfQTDDFocBwIMIjfLNpaI5YMluXKc8-K767wVOwHbG90rxIS-yCNV2iNIhiBHiDE6WOuUT6vBoriddisnwppIxwHx9pgbm8/'/></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…~~~

Ardi al-Maqassary

"Aku melihat, diujung sana, ada setitik cahaya yang terang benderang. Akan kuraih cahaya itu, dan membagikannya kepada seluruh manusia!!!"

5 Komentar

  1. halo kawan ane mau minta tolong cara masang kode css yang kita dapatkan dari PureCSSMenu.com gimana ya bingung bro...

    Tq sebelumnya

    BalasHapus
  2. Mas klo mau ganti warna menudropdownnya gimana yah? jika berkenan di balaz ke email sy Iqbalmail1st@yahoo.com

    BalasHapus
  3. mkasih tuh ats info nya
    tolong mampir juga ya plizz

    http://komputer-co.blogspot.com

    BalasHapus
  4. nice sobat

    http://gopar-it.blogspot.com

    BalasHapus
Lebih baru Lebih lama

نموذج الاتصال