Hover Image (keluar ayat)

Gadess.Butterfly

Khamis - 29/11/12

at 10:31 PM

Assalamualaikum .. !

ade request tuto lah dari adik manis kita ni

eh, korang perasan tak gambar dekat sidebar aienn ni ?

sebelum cursor menyentuh

selepas cursor menyentuh (akan keluar ayat)

haaa...macam ni lah yg adik manis tu maksudkan .now, follow this step :-

Blogger Template

1. Dashboard -> Template -> Proceed -> ctrl + F search kod body {
2. copy dan pastekan kod dibawah ni dekat bawah kod-kod body {

#ck{
text-align:center;
background: #F1E0FA;
color:#000;
width:230px;
height:142px;
margin-top:-147px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out;
}

#ck:hover{
opacity:.7
}  

3. preview dulu, kalau takde apa-apa error, boleh terus save.
4. now terus pergi ke Layout -> Add a Gadget -> HTML/JavaScript
5. copy dan pastekan kod dibawah ni di HTML/JavaScript

<center><img height="142" src="URL IMAGE" width="230" /></center><div id="ck"><center>AYAT KORANG</center></div>

6. dan siap, save :)

Blogskin

1. Dashboard -> Template -> ctrl + F search kod body {
2. copy dan pastekan kod dibawah ni dekat bawah kod-kod body {

#ck{
text-align:center;
background: #F1E0FA;
color:#000;
width:230px;
height:142px;
margin-top:-147px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out;
}

#ck:hover{
opacity:.7
}

3. kalau nak letak benda ni dekat sidebar, pergi dekat sidebar, copy dan pastekan kod dekat bawah ni di bawah title sidebar korang tu

<center><img height="142" src="URL IMAGE" width="230" /></center><div id="ck"><center>AYAT KORANG</center></div>

4.  dah siap, preview and save :)

Selamat Mencuba ^_-



Tweet