Minggu, 26 Februari 2012

Cara Membuat Efek Gambar Membesar dan Memutar


By on 15.18

Cara Membuat Efek Gambar Membesar dan Memutar - Bagi sobat yang ingin lebih mempercantik Tampilan Blog, soba bisa pakai Cara Membuat Efek Gambar Membesar dan Memutar jadi maksudnya saat Gambar disentuh oleh Kursor Mouse maka secara otomatis Gambar Tersebut akan Memutar dan Membesar.
Lihat Demonya dibawah ini.


Gimana sudah lihat coba arahkan Kursor Mouse ke Gambar diatas Memutar dan Membesar ya.
Bagi sobat yang ingin memasang nya di Blog sobat silahkan perhatikan baik-baik langkah-langkah dibawah ini.
  • Login ke Blog kamu.
  • Pilih EDIT HTML, cari kode </head>
  • Setelah ketemu letakan kode dibawah ini tepat diatas kode </head>
<style>#blazerblog{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#blazerblog:hover{ -o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);}#blog a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>
  • Simpan.
Nah untuk memberi Efek membesar dan memutar nya pada gambar silahkan perhatikan baik-baik kode dibawah ini, kamu hanya tinggal menambahkan kode <div id="blazerblog"> sebelum kode Script gambarnya dan </div> di bagian akahir nya .
Contoh.

<div id="blazerblog">
<a href="http://blazerracing.blogspot.com" target="_blank" title="Cara Membuat foto/gambar efek memutar-mutar dan membesar saat disorot mouse"><img height="203" src="http://3.bp.blogspot.com/-qO3L8iVxa4Q/TyjafAmQSkI/AAAAAAAAAVw/p0S58kjTSHk/s1600/f1ae1b772bfb390091307fea13295673dbb18b8a.png" style="border: 0px;" width="325" /></a></div>


Yang berwarna biru adalah URL Gambar nya.
Sepertinya cukup sekian penjelasan dari saya, jika sobat tidak paham atau kurang mengerti silahkan tinggalkan pesan di kotak

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

3 komentar:

  1. sippp, muter2 sampe pusin hehehe... tapi keren

    BalasHapus
  2. Ada gk cara yang otomatis supaya gambar langsung membesar tanpa div id="blazerblog"????

    BalasHapus