Adsense

Gadget Dropdown Menu di Blog

Membuat menu drop down pada blog tidak sesulit yang dibayangkan hanya butuh ketelitian. Berikut ini langkah-langkahnya:





Setelah memilih Tema, atur dahulu pada bagian Tata Letak blog 









Pilih + Tambahkan Gadget









Pilih HTML/JavaScript,






Copy kode berikut dan pilih Simpan

<!--Start Navigation -->
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK1">Home</a></li>
<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
<li><a href="">Category</a></li>
</ul>
</div>  
<!--End Navigation -->





Kembali ke Tema, pilih EditHTML

 



Cari kode berikut ini

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

h2 {
  font-size: 22px;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

Setelah bagian tersebut copy kode berikut

#navigationbar {
width: 100%; /* mengubah lebar navigation bar */
height: 35px; /* mengubah tinggi navigation bar */
}

#navigationcss {
margin: 0 auto;
padding: 0;
}

#navigationcss ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}

#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* mengubah warna tulisan utama */
display: block;
margin: 0;
padding: 10px 30px;  
/* mengubah angka pertama untuk bagian spasi atas/bawah, 
dan angka kedua untuk bagian spasi kiri/kanan */
}

#navigationcss li a:hover, #navigationcss li a:active {
color: #ffffff ; /* mengubah warna link ketika cursor berada di atas nya */
margin: 0;
padding: 10px 30px; /* pastikan pada bagian ini sama seperti diatas! */
}

#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #333333;  /* mengubah warna latar drop down box */
width: 150px;
color: #ffffff; /* mengubah warna tulisan drop down link */
float: none;
margin: 0;
padding: 7px 10px; /*mirip dengan di atas, untuk mengubah jarak di sekitar link */
}

#navigationcss li li a:hover, #navigationcss li li a:active {
background: #dd7700; /* mengubah warna latar drop down saat hover */
color: #ffffff; /* mengubah warna tulisan link drop down saat hover */
padding: 7px 10px;  /* pastikan sama seperti bagian diatas */
}

#navigationcss li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

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

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

Pilih Simpan dan lihat hasilnya di blog anda.