Cara Mudah Membuat Menu Drop Down Dibawah dan Diatas Header

Hallo teman-teman.......

Kali ini saya akan berbagi ilmu pelajaran lagi kepada teman-teman sekalian, pelajaran kali mengenai "Bagaimana Cara Membuat Menu Drop Down Dibawah dan Diatas Header", hal ini saya bahas karena tidak semua template blogger menyediakan menu yang bisa drop down, nah buat teman-teman yang bingung dan belum tau cara membuat menu drop down pada templatenya hal ini sangat membantu. Baiklah, kita langsung saja ke TKP ya?karena saya yakin teman-teman pada tidak sabar lagi kan?

Dibawah ini contoh menu drop down yang saya pakai:

Sekarang ayo teman-teman ikuti langkah demi langkah yang haru dilakukan dibawah ini:

• Pertama teman login ke blogger
• Selanjutnya pilih Rancangan/Template dan klik cadangkan/pulihkan kemudian unduh template, hal ini dimaksutkan untuk mengamankan template teman apabila nanti terjadi kesalahan pada saat meng-edit template.
• Nah..setelah selesai unduh, barulah sekarang teman bisa pilih rancangan/template kembali kemudian klik edit html.
• Untuk selanjutnya, centang Expand Template Widget, didalam edit html, coba teman cari code   ]]></b:skin> (untuk dropdown dibawah header) atau <b:skin><![CDATA[  (untuk dropdown diatas header), agar lebih cepat mencarinya, coba teman tekan ctrl+f kemudian paste-kan code diatas.
• Jika sudah ketemu, sekarang saatnya teman copas code dibawah ini dan letakkan tepat diatas code        ]]></b:skin> (untuk dropdown dibawah header) atau  <b:skin><![CDATA[  (untuk dropdown diatas header)

Klik untuk melihat

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVqRN8CqPFbUW3WpHUlmWVuQLh4FwIeIJLSRH7RC3h3zc3bCC0oMXXr57iRoxmjip1e6aWUOZ3HYLWCmO1Hb-bTv6YYQU1VoNJFh5jhEbZGpXhykPfoSSAYdgyI3WQsgukGzFNFT-v0E/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/AVvXsEj7-SwrTEUx_9BkQ-CMwTEG6jd9DwFgjFfUnM-ig1GDS1c0XpJcxPlc9ZwoVqCVvyR6U3XeaIkXqteMidUg8hWoXgTlv-ah6XCTkgx2shheab_mq_bGx1yUCbp0gpg1GtfpIeETvWOe0ZA/) 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/AVvXsEg68o6Us8Wi_j2sUzU_0rnVyNFnW4n4RR2mWoc3j2cqaf7PfiQprePeyJO3kDmZpOdHnvueuBDLaV-mxmlQwvL_9LH6vLrScmwMZGyFWB9EUVgob-G4bvNxul51DuOLvUOrmh-m7OaJWRQ/) 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/AVvXsEg68o6Us8Wi_j2sUzU_0rnVyNFnW4n4RR2mWoc3j2cqaf7PfiQprePeyJO3kDmZpOdHnvueuBDLaV-mxmlQwvL_9LH6vLrScmwMZGyFWB9EUVgob-G4bvNxul51DuOLvUOrmh-m7OaJWRQ/) 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;
}

• Setelah selesai copas code diatas, sekarang masih di edit html, sekarang teman cari code  <div id='content-wrapper'>  (untuk dropdown dibawah header)  atau  <body>  untuk dropdown diatas header) dengan cara tekan ctrl+f dan copas code tadi.
• Jika sudah ketemu copas code yang ada dibawah ini tepat dibawah code   <div id='content-wrapper'>  (untuk dropdown dibawah header)  atau  <body>  untuk dropdown diatas header). "ingat!!! setiap template berbeda-beda, jadi bila tidak ketemu, cari code yang mirip dengan code diatas"

<div id="catmenucontainer">

<div id="catmenu">

<ul>

<li><a href="http://link%20url%20teman/">Home</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1</a>

<ul class="children">

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1-1</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1-2</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1-3</a></li>

</ul>

</li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2</a>

<ul class="children">

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-1</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-2</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-2</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-3</a></li>

</ul>

</li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3</a>

<ul class="children">

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3-1</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3-2</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3-3</a></li>

</ul>

</li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-4</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5</a>

<ul class="children">

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-1</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-2</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-3</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-4</a></li>

</ul>

</li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-6</a>

<ul class="children">

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-6-1</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-6-2</a></li>

</ul>

</li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-7</a></li>

<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-8</a></li>

</ul>

<div style="float: right; margin-right: 20px;">

<a href="http://freedom-mediafire.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiM5stVTIiW-rtASNJip68ZvC7dS0n1yxl5rsz4OJ9YsALmxYnSPqWPoNg0zjZssqHaUPLOzdFRlqGvKekWMiAWmlLJ9JqXOcIjbT6zy3ktu583jO0zXIEcnaoYPXq8wuWlMJ3gd5orgk/s320/favicon+32x32.ico" /></a></div>

</div>

</div>

<div class="clear">

• Selanjutnya simpan templatenya dan lihat hasilnya.

Keterangan:

Ganti http://LINK URL TEMAN/ dengan URL link blog teman.
Ganti kode-kode Your-Link-Here dengan link tujuan yang ingin teman masukkan
Ganti Link-Title dengan title link teman.
Ganti Link-Name dengan nama link yang teman inginkan.