Minggu, 27 Februari 2011

Cara Membuat Menu Dropdown di Blog

Selain untuk mengefektifkan penggunaan ruangan, menu dropdown juga berfungsi mempercantik Tampilan Blog kita.
Saya akan sedikit mengajarkan bagaimana membuat menu Dropdown.

Kita Masuk Ke Blog kita Melalui ID kita.

Selanjutanya kita masuk Ke Perancangan

Masuk ke Edit Template

Ketikan Script Di bawah ini di antara <style type="text/css">

#NavbarMenu {
background: #555 url(http://www.revolutiontwo.com/demo/church/wp-content/themes/church_10/images/navbar.png);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}

#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}

#NavbarMenuright {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}

#nav {
margin: 0;
padding: 0;
}

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

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}

#nav li a:hover, #nav li a:active {
background: #555 url(http://www.revolutiontwo.com/demo/church/wp-content/themes/church_10/images/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}

#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

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

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

#nav li ul ul {
margin: -32px 0 0 171px;
}

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

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

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

Kemudian kita ketik script di bawah ini

<DIV id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><A expr:href='data:blog.homepageUrl'>Home</a></LI> <LI> <A href='#'>Techknowl.com</A> <UL> <LI> <A href='#'>Sub Page #1</A> <UL> <LI><A href='#'>Sub Sub Page #1</A> </LI> <LI><A href='#'>Sub Sub Page #2</A></LI> </UL> </UL> </DIV>
ditaruh sesuakan dengan keinginan kita