Cara Membuat Efek Gambar Berputar Pada Blogspot

Posted on by Jason Ward
*Cara Membuat Efek Gambar Berputar Pada Blogspot* – Tips/trik di blog kali ini kita akan belajar membuat efek, seperti postingan saya kemarin tentang efek diantaranya:
  1. Efek Bintang Bertabaran Pada Kursor Blog
  2. Efek Hujan Salju di Blog 
  3. Efek Tulisan Berkedip-Kedip di Blog
  4. Efek Shadow Pada Tepi Blog.
Nah,,, untuk postingan kali ini saya akan share Efek Gambar Berputar Pada Blog. Bagaimana cara kerjanya efek ini?? trik ini akan berfungsi jika gambar pada postingan disentuh mouse, biasa disebut efek gambar berputar saat disentuh mouse.

Efek berputar kali ini ada dua macam, yang pertama berputar dengan efek zoom dan ynag kedua dengan efek berputar kesamping. Jika sobat ingin memasangnya agar menarik perhatian visitor, yuk,, simak yang dibawah ini sob.,.,
–(Efek zOOm)- Cara Membuat Efek Gambar Berputar di Blog -(Efek zOOm)-
1.Login ke akun blogger.
2.Kemudian >>>Klik Template Pilih Edit HTML.
3.Kursor klik pada kotak edit HTML, Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>.
4. Kemudian copas kode di bawah tepat di ATAS Code ]]></b:skin>.

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s 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}

5. Selesai dan Lihat hasilnya.

–(Efek Berputar Kesamping)-
 
1.Login ke akun blogger.

2.Kemudian >>>Klik Tata Letak >> Pilih Edit Tambah Gadget >>> pilih Html / Javascript
3.Copy dan paste kode di bawah pada Kotak Html / Javascript tadi:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’></script><script type=’text/javascript’> $(document).ready(function() { $(‘a’).hover(function() { $(this).animate({ marginLeft: ’10px’ }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

Keterangan:
400 adalah speed /kecepatan efek nudging.

4. Simpan dan lihat hasilnya.

Sekian dulu share Modifikasi Blog dengan judul Cara Membuat Efek Gambar Berputar Pada Blogspot. Selamat mencoba. Salam Blogger

Related Posts