Tuesday, December 25, 2012

Tutorial : Navigate Hover #6

Tumblr_mc2trwompx1qcb59ho1_500_large
Atin ada buat skin pertama, yang navigate tu atin lupa nak buat tutonya ><.. So atin buat sekarang lah.. bagi korang yang nak navigate macam atin yang dalam skin tu.. nak tengok contoh , click preview k.
  • Template Design/simple : paste kat Html/Javascript
  • Blogskin/Classic : paste bawah code </style>
<style>
a.navi {
background: pink;
padding: 6px;
display: inline-block;
text-transform: uppercase;
font: 7pt trebuchet ms;
width: 70px;
text-align:center;
margin-bottom:10px;
color: #fff; 
border: 1px solid #fff; 
opacity:.8
}
a.navi:hover {
color:#fff;
background:url(http://data.whicdn.com/images/37003377/teen-top_1889284247601028765_large.jpg);
background-size:420px;
background-position:10% 230px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 3.5s;
}
</style>
<center>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
</center>



16 comments:

N|A|N said...

tak jadi pon.:(
tolong ajar pliz.
http://diarie-s.blogspot.com/

Atin Tory said...

@N|A|N : ape yg x jd nye? sy tgk blog awk tu dh jd? :/

N|A|N said...

nak bukak diyer tak boleh

N|A|N said...

memng la jadi,tapi nk bukk tu x leh :(

Atin Tory said...

@N|A|N :mn idaknya, link tu awk patut tukar kpd link awk yg navigate tu --'

N|A|N said...

mcm mne?
tak paham la.
tolong buat bole?

Atin Tory said...

@N|A|N : mcm ni.. awk ad navigate yg lame sebelum awk letak navigate ni? .. klo ade awk copy bahagian link tu balik.cube bg sy code tu

N|A|N said...

code yng mne?

Atin Tory said...

@N|A|N : example ad code ni (onclick="document.getElementById). code ni la awk kene taruk -.-..

N|A|N said...

guane jdi mm ni?
http://diarie-s.blogspot.com/

N|A|N said...

okeyh,da jadi

'Alya said...

Link tu kan..Kena letak link yang mana yee??

Atin Tory said...

@'Alya link web

Aina Nasha♥ said...

tq atin,, jadi.. tapi gambar tu nasha tukar jadi gamnbar nasha
http://diarionline-ku.blogspot.com/

Atin Tory said...

@Aina Nasha♥ : xpe . boleh je :)

Risha Melon said...

saya ambik ^^ hee 1st jumpa blog ni semua tuto best . jgn risau sy tak retutor awak :)