Cara Mudah Membuat Menu Drop Down di Bawah Header Blog Kita ~ TEKNOLOGI & INFORMASI

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. 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/AVvXsEieduIn5qtUMnM28YLUoZy0GxkLDikfIJo5Ne0f2ecbd6oNba7WCelV5gZ1YXo1IjqpYW8FTMu6jmsMgJ9hMkBBXfN9I_KRDX_xEGqJ-4I0yCSGkusbG21cTiSQBahtJ1HboN8jyL3yIX5u/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/AVvXsEj6Y0yQmI_YzixQDzQMuiK5p64KNY45-oIGhyphenhyphent5BBHzRT8H3sY-nRQVySG7hYg0Uy-GDQb4Z6EgS5cOgLVGLo-c6V3H30Uq1nIHV4LsOr0C80jC8W51H0RxA3wV84qus0paY-3TBtADK6KF/) 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/AVvXsEic8i7q048_jn-9axyF6nqUrbGuzLozIGIrP_NtWsdg0E8ckzfF8lntO-6TEVINathrOB3hwwtxtNbzbdGrHc8uF5ZdqG1B1bzc-48y5MfrGoHKXpBjoChd2iSVbYtA8sd4phiSIGBBN1dU/) 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 {

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'>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

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…~~~

http://www.psychologymania.com/2011/09/cara-membuat-menu-drop-down-di-bawah.html

TEKNOLOGI & INFORMASI

Senin, April 02, 2012