Tutorial : Navigation Tab #4

Live Preview :


1. Layout --> Add A Gadget --> Edit HTML/JavaScript
2. Copy dan paste code di bawah :

<style>
a.nav{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:5px;
display:inline-block;
text-align:center;
background: #EEE;
color:#000;
width:90px;
padding:4px;
font: 14px Franklin Gothic Demi Cond;
}
a.nav:hover{
color: #fff;
background:  #EBD6FF;
-moz-box-shadow: inset 0 0 5px 5px #EBD6FF;
-webkit-box-shadow: inset 0 0 30px 30px #EBD6FF;
box-shadow: inset 0 0 30px 30px #EBD6FF;
}
</style>
<div style="background: #CAC7D9; border-bottom: 1px dashed #FFF; border-top: 1px dashed #fff;"/><center>
<a class="nav" href="URL/LINK">HOME</a>
<a class="nav" href="URL/LINK">LINKIES</a>
<a class="nav" href="URL/LINK">FREEBIES</a>
<a class="nav" href="URL/LINK">HATEME?</a>
</center></div>

 EDIT :
ABC : Link Page kome..
ABC : Background sebelum dan selepas hover..
ABC : Tajuk
ABC : Background Purple tukar ikut warna kome.. sini / tak pun tukar kod warna dengan url(url images);
3. Dah siap edit , Save..
4. Then , Preview.. Haaa jadi ke tidak ? ? ? :)


No comments

Terima kasih kerana sudi menulis komen di blog Nurrul, sebarang pertanyaan akan dibalas secepatnya. Jazakallahu khairan