Slide Down Menu



Korang boleh memuatkan satu kotak dengan 3 jenis LINK ! Awesome kan. Ia nya juga tak makan banyak ruang ma.. Jom lah torai ^^


  • Copy semua code dibawah 
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#nav {display:inline-block; background: #FA91BB; color: #fff; display:block; width: 88px; height: 20px; text-align: center; padding-top:2px; margin-left:2px; margin-top:2px; position:relative; text-align: center; z-index:1; font-weight: bold; -moz-border-radius:7px; -webkit-border-radius:7px; display: inline-block;
font-family: 'Yanone Kaffeesatz'; letter-spacing:1px; text-decoration:none}
#subnav {position:absolute; overflow:hidden; height:0px; background: #f2c4ce; padding-top:2px; margin-left:2px; margin-top:2px; position:relative; text-align: center; z-index:1;}
#subnav a {display:block}
#nav:hover #subnav {height:auto}


</style>
<br />
<center>
<div id="nav"><a href="#">TAJUK 1</a>
<div id="subnav">
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
</div></div>
<div id="nav"><a href="#">TAJUK 2</a>
<div id="subnav">
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
</div></div>
<div id="nav"><a href="#">TAJUK 3</a>
<div id="subnav">
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
<a href="url LINK" style="text-decoration:none">NAMA LINK</a>
</div></div>
</center>


  • Pastekan di Dashboard > Layout > Add Gadget > HTML/Javascript
  • Warna biru untuk jenis font
  • Warna purple untuk tukar color dan size kotak
  • Save dan Preview. Jadi  tak ?

5 comments

  1. dhira datang lagi.. tuturial yura memang awesome lah..

    ReplyDelete
    Replies
    1. haha takdelah, Yura suka berkongsi aje senanye XD

      Delete
  2. wahh , terima kasih , dah lama cari tuto ni ^^

    ReplyDelete

Awak mehla komen? satu komen pun jadilah :')