Tutorial : Navigation Tab #3

Live Preview
1. Layout --> Add A Gadget --> Edit HTML/JavaScript
2. Copy dan paste code di bawah :
<style>
navi {
font-family: arial; letter-spacing: 1px; font-size: 11px;
line-height: 13px; display: inline-block;
background: #F6CEE3; color: #fff; width: 110px; padding: 5px;
margin: 1px; text-align: center; text-transform: lowercase;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
navi:hover {
font-family: verdana; letter-spacing: 1px; font-size: 11px; line-height: 13px; display: inline-block;
background: #eee ;border: 3px solid #CEF6F5; color: #000; width: 110px;
-webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    }
</style>
<br />
<center>
<a href="LINK"><navi>home</navi></a>
<a href="LINK"><navi>about</navi></a>
<a href="LINK"><navi>stuff</navi></a>
<a href="LINK"><navi>link</navi></a>
<a href="LINK"><navi>site</navi></a>
</center>
</div>
 EDIT :
ABC : Link Page kome..
ABC : Background sebelum dan selepas hover..
ABC : Tajuk
3. Dah siap edit , Save..
4. Then , Preview.. Haaa jadi ke tidak ? ? ? :)

3 comments

  1. thanx 4 the tuto. tapi ada x tuto mcm mana nk buat pages n linkkan dgn tab menu?

    ReplyDelete
  2. @Nurfatihah Najwa Rusmadi yang mana awk maksudkna yer.. hmm mungkin tuto ini membantu :
    http://youismysoul.blogspot.com/2010/08/tutorial-cara-buat-link-pages.html

    ReplyDelete

ღ Nice to see , nice to read ,
Once comment , I will hit you back ! :D
Its that true my poem ? HAHA. Ignore it..

Thanks , I love you all !