Selamat sore sahabat blogger semua !!! Kali ini, aq akan membagikan Tips dan Trik nih buat kalian semua tentang Cara Membuat Gambar di Blog Berputar saat Tersentuh Cursor.
Cara Membuat Gambar Berputar Tersentuh Cursor :
- Login Blogger.com
- Klik Template
- Edit HTML => expand template widget => Cari kode ]]></b:skin>
- Letakkan kode di bawah ini di tepat atas kode ]]></b:skin> :
Gambar berputar di posting blog :
.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Gambar berputar dan membesar di posting blog :
.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}
Gambar Post dan Komentar :
.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}.img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Hanya Gambar comment :
.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.comment img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Hanya Gambar Header saja :
.header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.header img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
- Save template
Catatan : Kode-kode diatas sebenarnya sama, yang membedakan
hanyalah perintah yang telah aq beri warna merah pada fontnya.
Ditulis Oleh : Unknown ~ Tips and Trick, Download, Widget and Gadget, and Other Article
Sobat sedang membaca artikel tentang Cara Membuat Gambar di Blog Berputar saat disentuh Cursor. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terima kasih.
Asyik juga ya kalau gambar bisa berputar-putar getu. Jadi kesannya lebih menarik ya mas. Izin praktek ah :)
BalasHapusHehehe... Silahkan dicoba mbak :D
HapusTrima kasih ya sdh brkunjung :)
Cie tempe baru ya mas ? ehehehe
BalasHapusTempe ?? mksudnya ??
HapusHehehe.. :D
Hmm?
BalasHapusCoba' sobat lakukan follow sekali lg mas rosyidi,, mungkin tdi mas rosyidi pas melakukan proses follow ada kekeliruan. soalnya profile mas rosyidi blom kelihatan di widget Follow Me blog ku... hehehe... Maaf,, aq gak maksa kok :D
Aq pakek template buatan Kang Kapuk mas, namanya Template_HTML5_Responsive_V6_Blue.
Insyaallah, saya usahakan saya kirim ke e-mail sobat. Tetapi mohon maaf ya kalau misalnya blom aq kirim2,, Soalnya internet.ku lemott mas :(
mantap tipsnya gan. salam sukses selalu.
BalasHapuswow gooooooooood top makasih ya mas triknya. pokonya maknyus lah.
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapus