Thursday, March 7, 2013

Tutorial : Navigate On Image [Like Me]

Tumblr_mj9saqmivw1r8witzo1_500_large

こんにちは, 안녕하세요 ,
 Assalamualaikum. Ini req kat Ask.fm dari seseorang.


Ok sebelum atin nak bagi code . Atin minta kerjasama dont re-tutor. lah . Kalau nak boleh pakai. tapi jangan  pakai sebagai re-tuto.. faham... huh nampakkan atin terlalu jujur. LOL ><

| EXAMPLE |

Blogskin/Classic Template
 Dashboard > Template > Edit HTML
 Tekan Ctrl + f serentak ,  cari code ni  </style>
 Copy code kat bawah ni


.sidenav2 a:link, .sidenav2 a:active, .sidenav2 a:visited
{
width:96px;
background:#EEEAD2;
color:#938B54;
display: inline-block;
text-decoration:none;
text-align:center;
font:10px arial;
font-weight:bold;
padding:1px;
margin-top:2px;
-webkit-transition-property:color, text; 
-webkit-transition-duration: .2s; 
-moz-transition-duration: .2s; 
-webkit-transition-timing-function: linear, ease-in;
border-bottom:1px solid #DDD9BE;
}

.sidenav2 a:hover
{
-webkit-transition-duration: .2s; 
-moz-transition-duration: .2s; 
background:#fff;
color:#938B54;
border-bottom:1px solid #D2B48C;
}

 Paste di atas code </style> 
 Then copy code bawah ni pula
<center>
<div style="background:url(URL BACKGRUND) repeat; border:1px solid #EEE;padding:5px;width:200px;">
<img style="width:200px;height:140px;" src="URL IMAGE">
<div class="sidenav2">
<a href="LINK HERE">TITLE</a>
<a href="LINK HERE">TITLE</a>
</center>
</div>
  Paste kat sideber korang
  Preview & save



Template Designer
 Dashboard > Template > Add Gadget
 Copy code bawah ni dan paste Add Gadget Tadi


<style>
.sidenav2 a:link, .sidenav2 a:active, .sidenav2 a:visited
{
width:96px;
background:#EEEAD2;
color:#938B54;
display: inline-block;
text-decoration:none;
text-align:center;
font:10px arial;
font-weight:bold;
padding:1px;
margin-top:2px;
-webkit-transition-property:color, text; 
-webkit-transition-duration: .2s; 
-moz-transition-duration: .2s; 
-webkit-transition-timing-function: linear, ease-in;
border-bottom:1px solid #DDD9BE;
}

.sidenav2 a:hover
{
-webkit-transition-duration: .2s; 
-moz-transition-duration: .2s; 
background:#fff;
color:#938B54;
border-bottom:1px solid #D2B48C;
}
</style>
<center>
<div style="background:url(URL BACKGRUND) repeat; border:1px solid #EEE;padding:5px;width:200px;">
<img style="width:200px;height:140px;" src="URL IMAGE">
<div class="sidenav2">
<a href="LINK HERE">TITLE</a>
<a href="LINK HERE">TITLE</a>
</center>
</div>

merah : URL background
oren : URL image
Ungu : Link

*yang color2 tu korang ubah la color korang sendir k :)

10 comments:

intan nursyafiqah said...

hehe...first person...adk guna tuto ni...hehe..XD btw thnx kak wt tuto ni...

Atin Tory said...

@intan nursyafiqah : haha dear ke yg req tu? huhu

intan nursyafiqah said...

hmm~ bkn2...adk nk minx request tpi malu~ hehe...XD skrg unnie da wt adk ikut...X)

Atin Tory said...

@intan nursyafiqah : ohh.. hii ingat dear yg req.. XD

intan nursyafiqah said...

hehe...x :D adk ucap kn trima kasih wt tuto ni...hmm..mianhe klu adk wt salah...

Atin Tory said...

@intan nursyafiqah : ehh buat salah? dear xde wat salah pape pun.. :D.. malah akak bagga sbb dear yg ikhlas komen tuto akak

intan nursyafiqah said...

:') gumawo akk :') syg akk :D

ejulz said...

pandai atin main code ni ek.. hehe

Atin Tory said...

@ejulz : hehe :)

Kawaii Gurlzz said...

Thanks for this tuto :)