Cara Membuat Menu Pulldown

Bagi blogger pemula yang menghendaki template yang memiliki menu pulldown tak perlu susahsusah mencari template yang menyediakan menu pulldown. Anda bisa menambahkan sendiri menu tersebut pada template anda dengan cara amatir yang saya temukan berikut.
Buka blogger anda.
Masuk pada edit HTML kemudian cari "#NavbarMenu { " tanpa tanda petik, jangan lupa centang expand template widget terlebih dulu.
Copi kode berikut di bawah tanda “}” (tanpa tanda petik). Tanda tersebut merupakan akhir kode menu  "#NavbarMenu { ". ni dia kodenya :



#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;
 margin: 0;
 padding: 8px 8px 8px;
    }


#nav li a:hover, #nav li a:active {
 color: #fff;
 margin: 0;
 padding: 8px 8px 8px;
 text-decoration: bold;
}


#nav li li a, #nav li li a:link, #nav li li a:visited {
 background: -moz-linear-gradient(top, #888, #000, #888);
 width: 130px;
 color: #FFF;
 font-size: 15px;
 font-family: Lucida Sans Unicode;
 font-weight: normal;
 text-transform: capitalize;
 float: none;
 margin: 0;
 padding: 5px 8px;
 border-top: 1px solid #FFF;
 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: -moz-linear-gradient(top, #049D70, #000, #049D70);
 color: #FFF;
 padding: 5px 20px;
}
#nav li {
 float: left;
 padding: 0;
}
#nav li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 130px;
 margin: 0;
 padding: 0;
}
#nav li ul a {
 width: 130px;
}
#nav li ul ul {
 margin: -54px 0 0 172px;
}
#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;
}



Setelah itu cari kode "id='NavbarMenu'>" (tanpa tanda petik)

<div id='NavbarMenu'>
  <div id='NavbarMenuleft'>
  <ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li> (copi mulai berikut)
<li><a href='#'>Nama Menu</a> 
<ul>
<li><a href='Nama blog kamu/search/label/Submenu 1'>Submenu 1</a></li> 
(tambahkan submenu selanjutnya dengan kode merah dan biru)
</ul>





Simpan template kamu.
Selamat Mencoba.

0 komentar:

Posting Komentar

 
Copyright © efchalisto