Wednesday 27 July 2011

Horizontal Menu (2) dengan animasi hijau

ok..mula mula kena log in blog..
lepas tu pegi Design > Page Elements > Add Gadget > HTML Javascript


<style type="text/css">
.pandet ul li{list-style: none; display: inline;}
.pandet1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #38761d; border: 1px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.pandet2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background:#38761d; border: 1px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.pandet1:hover, .pandet2:hover{ background:lime; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
-webkit-box-shadow:0px 0px 55px lime;-moz-box-shadow:0px 0px 55px lime;
}
</style>

<div class="pandet">
<ul>
<li class="pandet1"><a href=" URL BLOG ANDA" target="_blank"><span style="color: white;">Home</span></a></li>
<li class="pandet2"><a href="URL-link" target="_blank"><span style="color: white;">Menu1</span></a></li>
<li class="pandet2"><a href="URL-link" target="_blank"><span style="color: white;">Menu2</span></a></li>
<li class="pandet2"><a href="URL-link" target="_blank"><span style="color: white;">Menu3</span></a></li>
<li class="pandet2"><a href="URL-link" target="_blank"><span style="color: white;">Menu4</span></a></li> 
<li class="pandet2"><a href="URL-link" target="_blank"><span style="color: white;">Menu5</span></a></li>
</ul>
</div>

ok,
text pink kena tukar ngan url blog korang..
text merah replace ngan URL page yang korang nak kasi..
text purple tajuk page tadi tu .. :)

biasanya , widget menu camnih kena letak kat bawah blog header ok ;)

semoga berguna :)

No comments: