Cara buat simple zoom in image di blogspot


Untuk membuat simple zoom in seperti contoh yang boleh anda cuba pada gambar di atas (letak kursor mouse di atas gambar) hanya ikut beberapa langkah yang sangat mudah di bawah.

Langkah 1

Log in blog => Dashboard => Design => Edit HTML

Langkag 2

Dengan menggunakan keyboard, tekan kekunci F3 atau Ctrl+F. Seterusnya taip atau paste kod ]]>skin> atau kod ]]></b:skin> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin dan paste kod di bawah di atas atau sebelum kod ]]>skin> atau ]]></b:skin>

.post a:hover img {
width:500px; height:400px; float:middle;
}

Contoh:
.post a:hover img {
width:500px; height:400px; float:middle;
}
]]>skin>

Akhir sekali, klik Preview dan jika tiada mesej error, klik Save.

p/s: Jika efek zoom in menjadi terlalu besar atau kecil, anda boleh mengubah saiz zoom in tersebut dengan menukar angka pada width: 500px dan height: 400px.

Contoh:

width:550px; height:450px; float:middle;


{ 37 comments.. read them below or add one }

♪..aq[daN]pUteraku..♪ ♪..aq[daN]pUteraku..♪ 5:52 PM
wah!! nk tryy... tankx 4 sharingg ^^
♪..aq[daN]pUteraku..♪ ♪..aq[daN]pUteraku..♪ 5:56 PM
wah... sedihhh... tkder poonnn.. :((
Nescafe ais Nescafe ais 6:00 PM
@♪..aq[daN]pUteraku..♪

Cuba guna kod yang ni:

.post-body a:hover img {
width:500px; height:400px; float:middle;
}
SyUhAdA SyUhAdA 6:05 PM
okeh..
dah bjaya wat..
thanks 4 sharing..
nak copy ltak kt blog bleh?
Nescafe ais Nescafe ais 6:07 PM
@SyUhAdA

Buatlah apa pun.hehe.
Nescafe ais Nescafe ais 6:13 PM
@SyUhAdA
Tq juga untuk kamu. :)
yana nana yana nana 6:57 PM
alaaa.. xjumpe pown code yg nk dicari tu.. hmm
ibusofiya ibusofiya 8:53 PM
dh try...syokkk!! clear punye
ciK mOt ©™ ciK mOt ©™ 9:06 PM
yey, berjaya...best best...
blog-tips-kurus blog-tips-kurus 9:13 AM
mari cuba!
TQ tuan blog;)
fikah mus fikah mus 3:04 PM
tenkiyu..tenkiyu!!
senang gile!!
dah berjaya buat!!
iza iza 4:09 PM
Salam..
Menarik ni...
Piah Becok Piah Becok 4:14 PM
wow thanks.. will use it later. tq
Azura "Banyak Cakap" Azura "Banyak Cakap" 11:00 AM
Bestnya, hehehee, thanks for the tutorial, will do it later, line KO pula ni. :)
Antoni Wijaya Antoni Wijaya 12:11 PM
nice tutorial nya. .
jeera jeera 3:47 AM
dah buat n tak jadi ;(
pape pun thnks sudi share
Nescafe ais Nescafe ais 4:01 AM
@jeera

Sama-sama. Jika kamu tinggalkan link, mungkin saya boleh tolong. Apa pun tq sebab sudi mencuba.
zethy zethy 8:22 AM
huhu..xjadi pun..yg lain2 jadi.bab zoom in x jadi.
huhu..br bljr nk wak blog ni
AYuNG AYuNG 10:13 PM
lor....x jadik pun...:(
faiz faiz 10:12 PM
dah buat...tapi gambar read more pon membesar gak...so remove bali...camner nak buat biar read more tu tak jadi besar...
miSz maR0o miSz maR0o 11:45 PM
This comment has been removed by the author.
miSz maR0o miSz maR0o 7:15 PM
xleyh pown~
http://musyuktedymaroo.blogspot.com/
cokelathati cokelathati 10:37 PM
alamak, xjd pun :(
2 2 code pun da cube..:((

http://cokelathati.blogspot.com
farhanomHUSNA farhanomHUSNA 4:44 PM
tak boleh pun. T___T

http://onlythreesec.blogspot.com/
Hanis Zakirah Hanis Zakirah 11:54 AM
effect x pada time untuk blog load?
Farid Casablancas Farid Casablancas 5:16 AM
satu kod pon tak berkesan..
Linda Fuad Linda Fuad 4:12 PM
sy dh cube.. menjadi..tp bile dh zoom image blurr sikit.... anyway,trimass~~ :D