Cara Membuat Menu Drop Down di Bawah Header

Setelah kemarin blog ini membahas tentang Cara Membuat Menu Top Di Atas Header, kayaknya kurang komplit deh kalo yang di bahas cuma di atas header doang, gak kompilt gak enak hehehe . . .

Mencoba-dan terus mencoba sekarang blog ini akan sharing tentang Cara Membuat Menu Drop Down di Bawah Header, apa blog sobat belum ada menu di bawah header? kalo belum ada dan sobat ingin memasang menu di bawah header blog sobat, sobat tepat sekali jika berkunjung dan membaca postingan/articles kali ini, karna itulah yang akan kita bahas! kalo sobat nggak ngerti menu di bawah header itu apa, kayaknya gak usah saya jeasin deh, hehehe . . . kalo gak ngerti sobat bisa lihat gambar di bawah ini:

contoh menu drop down di bawah header

menu di atas sudah saya modifikasi sedikit jadi ada iconnya juga, kalo sobat gak suka bisa sobat buang ke jalan iconnya, xixixix . . .

Ok dah kita lansung aja ya menuju cara pemasangannya ke blog sobat, untuk pemasangannya silahkan sobat ikuti langkah-langkah berikut:

1.Masuk ke akun blogger sobat.

2.Pada menu pilih Rancangan ➨ Edit HTML.

3.Sekarang centang Expand Template Widget, jangan lupa download dulu templatenya untu mengansipasi bila terjadi kesalahan.


4.Di dalam Edit HTML sekarang sobat cari kode ]]></b:skin> jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.


5.Jika sudah ketemu sekarang sobat copy kode berikut dan pastekan/letakkan di atas kode ]]></b:skin>.

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxEdVOxKGZdVCyctaMxyhN6TiX-sT6bXhHpzPyBArhkDWE6BCI1RtA-WDATMTbqFDsOrF5f2QxbVnV2vdEmZaz-gcOujBT-aoGm8fck3GnAVqfzZDDVPAmSm-sXit0hjnskg6WsJ_wyYi/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/AVvXsEjSBz3ynsfzaqKqLvDfTV_xcdNEHNvg2WydJlktfOqONkv-Lwq2PV0BL1EE6mYt6waoqHjFrTevWh56qDh9duu9RstxCbN1V8GHFqGQto5v69nkoMWpnccXokzNkvHDhJs5AmUZilxf4yBs/) 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/AVvXsEjM-J9_AZ1-Hex77BMh5UjLnKSbSzP9J38cYIXcSbHX6LShP0datmFlhMW6zvZ49o-L81j-fgfh9enLXhZqIjQG1BaHxYn7a6SqRcDMxktD9H_B0rrMhhmwaxgxTeKMxjjM07kMDQxM08AH/) 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/AVvXsEjM-J9_AZ1-Hex77BMh5UjLnKSbSzP9J38cYIXcSbHX6LShP0datmFlhMW6zvZ49o-L81j-fgfh9enLXhZqIjQG1BaHxYn7a6SqRcDMxktD9H_B0rrMhhmwaxgxTeKMxjjM07kMDQxM08AH/) 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;
}

6.Masih di dalam Edit mplare, sekarang sobat cari Kode <div id='content-wrapper'> ,jika sudah ketemu copi - paste kode dibawah ini tepat dibawah kode <div id='content-wrapper'>
setiap template berbeda-beda, jadi coba cari kode yang mirip dengan <div id='content-wrapper'>

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://LINK URL SOBAT/'>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/AVvXsEjlhp6GZdc1gjpk_uYkrCHIk4xkepkMvmXVvh0mRBxjaD84fJe_ktWJ_MlYxBoyGuZ9I3fLdSLHCvuPbjcF-oDpMVyeQPy0gntnsPbTULykEuKTSEUtAG5UT1ksAEpKXp82SoOGJypJXTS4/'/></a>
<a href='http://feeds.feedburner.com/pbtemplates'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnCoQrP8kiygwAT-JeP0MA_EtLA_13IZiy9dTl0tlDyFH6N7RXTGdsk_QpFRXewbKyvH7kz3_gmv3WGg4VvVv9HLshUX9I8ZlLWF5D2sTBdd52K1xgIJCwth0y62x9FECXRQFt2JgQ2jaD/'/></a>
<a href='http://www.twitter.com/btipandtrick'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkw-48ZSxNJOyce1k-hQhJ4JC5fGNtjd2CfJf3hiVq1sHVrSQQzNnrY2Fp9WxuxEK5SUKtqc8zceGQpKBQHgnv91OSAyXtifuTdnsbArWJlG63WCrevbT3ogIgZMdi4wjHFdqDoqHtXhJ/'/></a>
<a href='mailto:123@abc.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH8KO7eO4y2SgPTzbMctvNqJ2ONefQbww21rDPrf85VW7THBGbp8D3blXywgC0PTwRvAGpNJWFmA1g0NQmKsFSAQ9SW4ayIScwZnxYzthpJ8wRiGjxT2yNehIAwthYbCXHULnFyDws_c5m/'/></a>
</div>

</div>
</div>

<div class='clear'/>

7.Selanjutnya simpan template sobat.

Keterangan;
Ganti 'http://LINK URL SOBAT/' dengan URL link blog sobat.
Ganti kode-kode 'Your-Link-Here' dengan link tujuan yang ingin sobat masukkan
Ganti 'Link-Title' dengan title link sobat.
Ganti 'Link-Name' dengan nama link yang sobat inginkan.


Oke dah,Sekian dulu untuk postingan/articles kali ini, semoga dapat bermanfaat untuk sobat semuanya!

Bagaimana,apakah sobat berhasil menerapkannya ke blog sobat? Silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles kali ini!