Tuesday, August 7, 2012

Tutorial : Image Hover To Left

Tumblr_m7rtkn9o651rnazs6o1_500_large
Hari ni macam malas pulak nak buat tuto . Cadang nak rehat huhu tapi tak pe lah . Sebab tuto ni di request oleh Aqila . Terpaksa la buat huhu . she say " macam mana nak buat hover dekat image then dia ketepi macam atin punya ? " . Ok maksud die bila kita haver pic to ke tepi ek?? . Ok kalau ikutkan tuto ni kene credit to afiqah . Dialah tuan yang buat tuto ni . 



Dah faham? now kt buat k. Tapi yang design ni atin tak tau lah boleh ke tak .. buat cube lah 
Yang ni credit to afiqah k :D

BLOGSKIN

 Dashboard > Template > Edit HTML
 Tekan ctrl + f serentak dan cari code </style>
 Copy code bawah ni:
<style type="text/css"> 
#side{
color:#333333; 
font-family: Trebuchet Ms;
margin-right:-1px;
width:289px;
height:100px;
overflow:hidden;
}

#text{
font-family: Trebuchet Ms;
color:#333333;
font-size:11px;
text-align:center;
width:200px;
height:150px;
overflow:auto;
background-color:#fff;
}

#picture
{margin-left:-285px;
width:285px;
height:200px;
overflow:hidden;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;}

#side:hover #picture
{margin-left:-550px;}
</style>
 Paste di bawah code </style>

 Next , Copy code bawah ni pulak
<center><table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>
<td><div id="text">
PUT YOUR TEXT HERE !
</center>
<br>
</td>
<td><div id="picture">
<img height="140" src="URL IMAGE" width="200" border="0">
</div></td>
 Paste kat bahagian yang korang suka .
 Preview & save.


   
..............................................................................................................................



DESIGN

 Design > Edit HTML > Tick Expand Widget Templates
 Tekan ctrl + f serentak dan cari code bawah ni :
/* Header
----------------------------------------------- */
 Dah jumpa? Now copy code bawah ni
#side{
color:#333333; 
font-family: Trebuchet Ms;
margin-right:-1px;
width:289px;
height:100px;
overflow:hidden;
}

#text{
font-family: Trebuchet Ms;
color:#333333;
font-size:11px;
text-align:center;
width:200px;
height:150px;
overflow:auto;
background-color:#fff;
}

#picture
{margin-left:-285px;
width:285px;
height:200px;
overflow:hidden;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;}

#side:hover #picture
{margin-left:-550px;}
 Paste di bawah code tadi
 Next , Design > Add gadget > Html/JavaScript
 Copy code di bawah ni
<center><table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>
<td><div id="text">
PUT YOUR TEXT HERE !
</center>
<br>
</td>
<td><div id="picture">
<img height="140" src="ULR IMAGE" width="200" border="0">
</div></td>
 Paste dalam Html/JavaScript k
    Preview & save.

merah : ayat korang
biru : URL image 


Atin harap korang faham k . Atin pun terbelit tgk code die yg byk ni >< 

Credit : afiqah

6 comments:

Sheda ucu said...

suke2 thank dearrr

Atin Tory said...

@Sheda : hehe :) sama2 :D

Aqila Saleha said...

Thanks sebab sudi buatkan :)

Atin Tory said...

@aqila : ok sama2 :)

Madam fafa said...

Alahh tak jadi :( Frustnyer :\

Atin Tory said...

@Madam fafa : haha.. cube lagi..cube lg :D