Wednesday, June 4, 2014

cara membuat gambar berputar saat mengenai kursor mouse

putaran 360 derajat
  Tips cara agar gambar berputar sa'at disentuh cursor merupakan pembahasan posting blog kali ini dari saya, adapun cara ini merupakan memakai kode tambahan saja dari blog atau web itu sendiri, yang pastinya valit html5.
sistim kerjanya yang ini adalah:
gambar yang akan berputar bila kalian memakai kode yang ini berupa gambar yang berada di dalam postingan blog itu sendiri, berarti tidak akan bekerja jika gambar berada diluar area blog posting.
jika kalian ingin membuat gambar berputar juga selain gambar di postingan blog bisa kalian lakukan dengan cara yang saya bahas di bawah ini.
ini dia caranya gan:
yaitu dengan cara sebelum kalian akan menempatkan gambar dimana akan ditampilkan tambahkan dulu kode yang ini:
< div class="post-body" >*****< /div >

Kode yang saya tandai bintang [*****] adalah kode gambar yang akan kalian ingin pasangkan semisal contoh seperti yang dibawah ini:
< div class="post-body" > < a href="http://bloggeraneukaceh.blogspot.com/" >< img alt="blogger aneuk aceh" src="url gambar disini" / >< /a>< /div>

Cara dan kode membuat gambar berputar pada blog ini dia:
  1. Seperti biasanya dan lazim Login blogger kalian.
  2. pilih template dan edit html nya.
  3. cari kode [.post-body img] yang berada di dalam b:skin blog kalian.
    cara paling gampang adalah dengan melakukan pencarian, yaitu tekan Ctrl+f isikan kode tadi yang ingindi cari.
  4. tambahkan kode ini di dalamnya:
    -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;
    Bila belum ada kode tersebut di dalam blog kalian, kalian bisa lansung menambahnya didalam [b:skin]hasilnya akan seperti ini:
    .post-body 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;}
  5. cari kembali kode [.post-body img:hover] biasanya berada dibawah kode yang tadi alias berurutan
  6. tambahkan lagi kode yang ini:
    -o-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); background:#FFF;
  7. jika kode ini [.post-body img:hover]belum ada jugak pada blog kalian bisa kalian tambahkan lansung di bawah nya kode yang ini :
    .post-body img:hover{ -o-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); background:#FFF;}
  8. langkah yang terakhir yaitu simpan template dan lihat hasilnya.
Untuk melihat contoh gambar yang berputar bisa kalian arahkan kursos mouse pada gambar posting blog terpopuler saya yang berada di sebelah kanan.
Artikel yang sama
#tips membuat gambar berputar saat tersentu kursor
#gambar akan berputar saat tersentuh kursor mouse

No comments:

Post a Comment