Tutorial Membuat gambar di postingan memutar dan membesar ketika disorot mouse

Baiklah sahabat blogger pada kesempatan kali ini saya akan membagi tips cara gambar ketika di sorot mouse memutar dan membesar tentunya di dalam postingan.

Sebetulnya tips ini tidak hanya bisa digunakan di dalam postingan saja tetapi di beberapa letak blog juga bisa, namun kali ini saya akan membahas yang di dalam postingan dahulu.

Baiklah kita mulai langkahnya :

1. Masuk ke akun blogger sahabat.

2. Setelah di dashboard pilih opsi selanjutnya dan pilih template.

3. Klik edit html.

4. Selanjutnya cari kode seperti ini </head>.

5. Copy dan pastekan kode berikut di atas kode tadi :

<style type="text/css"> 

 #Gambar_memutar div

 {  height:100px; 

 width:100px;

 border: 3px solid #D8D8D8;

 border-style:double; 

 margin:10px auto; t

ext-align:center;

 -webkit-transition: all 2s ease-in-out; 

 -moz-transition: all 2s ease-in-out; 

 -o-transition: all 2s ease-in-out; 

 -ms-transition: all 2s ease-in-out; 

 transition: all 2s ease-in-out; 

 padding-top:5; 

 padding-left:5; 

 padding-bottom:5; 

 padding-right:5; 

 } 

 #Gambar_memutar div:hover, #Gambar_memutar div.hover_effect 

 { -webkit-transform:rotate(720deg) scale(2,2); 

 -moz-transform:rotate(720deg) scale(2,2);

 -o-transform:rotate(720deg) scale(2,2); 

 -ms-transform:rotate(720deg) scale(2,2); 

 transform:rotate(720deg) scale(2,2); 

 }

 </style>

6. Klik simpan template

Selanjutnya seperti yang telah saya bahas bahwa gambar ini didalam postingan, sahabat ketika masuk di postingan tinggal memasangkan kode <divid="Gambar_memutar"> dan </div>, dan apabila tidak ingin dipakai tidak usah memasangkannya.

Contoh lengkapnya seperti menjadi begini :

<div id="Gambar_memutar"><div class="hover"><a href="http://mohammad.rachmat-sopiandi.com/2013/08/dirgahayu-indonesia-ku.html" target="_blank"><img src="https://i1320.photobucket.com/albums/u531/mohrsop/Pask1c_zps6236c681.jpg" width="100" height="100"/></a> </div> </div>

Catatan : yang disorot warna biru adalah url blog, dan yang disorot warna hijau url gambar sahabat.

Apabila ingin memakai title tinggal menerapkannya dan bisa mengatur panjang dan lebarnya dari width dan height.

Untuk melihat demonya klik tombol DEMO di bawah.

Demikian semoga bermanfaat.

DEMO