Tuesday, December 25, 2012

Tutorial : Navigate Hover #5

Tumblr_mfdtgdpy9n1s0si72o1_500_large

Assalamualikum, Ok Atin tak nak cakap ape sebab korang semua dah tau kan ape yang atin nak tunjukkkan .haha .. ayat malas ku.. Nak tengok preview , click preview bawah photo 2 k :D.


  • Template Design/simple : paste kat Html/Javascript
  • Blogskin/Classic : paste bawah code </style>
<style>
.tabs {margin-left:-20px;list-style: none; }
#buttons {margin-top:25px;margin-left:22px;}
.button {float:left;margin-right:2px;height:92px;width:51px;}
#button1 {-moz-border-radius: 10px 0px 0px 10px;border-radius: 10px 0px 0px 10px;background-image:url(http://i.imgur.com/RvK6d.png);}
#button2 {background-image:url(http://i.imgur.com/yBLUW.png);}
#button3 {background-image:url(http://i.imgur.com/QjvPJ.png);}
#button4 {-moz-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;background-image:url(http://i.imgur.com/cbVNR.png);}
.nav {width:50px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:8px;font-family:tinytots;letter-spacing:1px;text-align:center;opacity:0;overflow:hidden;color:#fffdfd;background:#7A92DC;4-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}
.button:hover .nav {opacity:0.8;margin-top:60px;}
</style>

  • Next copy code bawah ni
<ul class="tabs">
<li><a href="LINK HERE"><div class="button" id="button1">
<div class="nav">TITLE</div></div></a></li>
<li><a href="LINK HERE"><div class="button" id="button2">
<div class="nav">TITLE</div></div></a></li>
<li><a href="LINK HERE"><div class="button" id="button3">
<div class="nav">TITLE</div></div></a></li>
<li><a href="LINK HERE"><div class="button" id="button4">
<div class="nav">TITLE</div></div></a></li>
</ul>
</div>
  • Paste kat sidiber korang k.

No comments: