Search

Jan 15, 2013

Cara membuat gambar bergerak dan membesar pada saat di sentuh kursor

Cara membuat gambar bergerak dan membesar pada saat di sentuh kursor - Asalamualaikum sobat-sobat setelah beberapa hari tidak menuliskan postingan tentang tutorial dan tips blog kali ini saya akan menuliskannya untuk sobat-sobat sekalian. hehe. pernahkah sobat-sobat mengunjungi sebuah blog dan di temukan sebuah gambar yang apabila di sentuh kursor akan membesar atau memutar. jujur kalo saya pernah menemuinya. mungkin sobat-sobat ada yang bertanya-tanya gimana sih untuk membuatnya ?? tenang-tenang sobat-sobat dengan membaca postingan ini insyallah sobat-sobat akan bisa. 

untuk biar meyakinkan sobat-sobat bahwa tutorial ini berkerja coba arahkan kursor sobat-sobat ke gambar di bawah ini ..



Gimana sobat-sobat keren kan ?? hehe tentunya :)
jika sobat-sobat ingin membuatnya silahkan ya ikuti cara-cara di bawah ini, hehe

1. Login terlebih dahulu ke blogger

2. Jika sudah kemudian pilih Template > Edit Html

3. Jika sudah kemudian cari kode </head> jika sudah ketemu copylah kode di bawah ini tepat di atas kode </head>


<style>#sundaboy img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #sundaboy img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>


4. jika sudah untuk agar berkerja jika di sentuh kursor ikuti format penulisannya seperti di bawah ini..

<div id="sundaboy">
<a href="http://novanpeace.blogspot.com/"><img src="KODE GAMBAR" /></a></div>

Keterangan : untuk tulisan yang berwarna merah bisa di ganti alamat link yang sobat-sobat inginkan dan untuk yang tulisan berwarna biru ganti dengan url dari gambar sobat-sobat.

Gimana sobat-sobat bisa atau tidak klo harapan saya bisa tentunya. hehe
Terimakasih sobat-sobat atas partisipasi sobat-sobat dalam membaca postingan saya semoga saja bermanfaat. hehe :)


Related Post:

Comments

30 komentar:

wah, thx infonya gan.
bermanfaat banget.

terima kasih atas informasi yang sudah di berikan, saya izin nyoba ya....

thanks info'x gan, sangat bermanfaat sekali bagi saya ..

Terima kasih gan,,infonya sangat bermanfaat. Kunjungi jg blog saya http://gualawa1.blogspot.com

Akhirnya ketemu juga tutorial yang saya cari, terima kasih gan udah ngasih tutorialnya

Trimakasih bro, tipsnya akan saya coba

thanks gan sangat bermanfaat dan menambah ilmu..

GAN GIMANA CARANYA YANG STEP KE 4 KURANG PAHAM ANE GAN ... TOLONG DI BALES

Den jangan lupa klik www.blankon.go-forum.net juga ye....
trims \m/

den jangan lupa gabung ya>>>> www.blankon.go-forum.net

nice gan, ane ambil ya... di tunggu kunjungannya machmudanlubis.blogspot.com

mas saya gk ngerti caranya, masih belum paham yang cara nmor 4 tu dicopy di mana
mohon bantuannya

Mantap, Gan..
Ngelmu ane jadi nambah..
(y)

yg ke 4 caranya gimana krg paham saya

Terimakasih banyak sob, mantab nih, dapet ilmu baru, biar tambah canggih blognya..

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Post a Comment