cara membuat gambar bergerak, berputar, membesar saat mouse disorot

cara membuat gambar bergerak, berputar, membesar saat mouse disorot

Time is money itu kata pepatah tapi bagi saya waktu adalah kesempatan berbagi

Dibawah ini saya akan menjelaskan langkah-langkah untuk membuat gambar pada postingan blogspot bergerak, memutar, membesar saat mouse disorot

1. login ke akun blogger anda   


2. pilih rancangan dan edit html


3. Jangan lupa untuk sesering membackup template sobat untunk mencegah erorr pada template dengan cara CentangExpand Template Widget ➨ Download Template


4. cari kode pada html dengan cara menekan tombol ctrl+F Copy kode dibawah ini tepat diatas kode </head>
   
   
   
   

   
   <style type="text/css"><br /> #gambar_saya div<br /> {<br /> height:100px;<br /> width:100px;<br /> border: 3px solid #D8D8D8;<br /> border-style:double;<br /> margin:10px auto;<br /> text-align:center;<br /> -webkit-transition: all 2s ease-in-out;<br /> -moz-transition: all 2s ease-in-out;<br /> -o-transition: all 2s ease-in-out;<br /> -ms-transition: all 2s ease-in-out; <br /> transition: all 2s ease-in-out;<br /> padding-top:5;<br /> padding-left:5;<br /> padding-bottom:5;<br /> padding-right:5;<br /> }<br /> #gambar_saya div:hover, #gambar_saya div.hover_effect<br /> {<br /> -webkit-transform:rotate(720deg) scale(2,2);<br /> -moz-transform:rotate(720deg) scale(2,2);<br /> -o-transform:rotate(720deg) scale(2,2);<br /> -ms-transform:rotate(720deg) scale(2,2);<br /> transform:rotate(720deg) scale(2,2); <br /> }<br /> </style>

   
   
   
   

       5.   Simpan/save templatenya

ingat : jika saudara ingin membuat postingan baru maka jangan lupa menyisipkan kode seperti pada contoh dibawah ini

<div id="gambar_saya"><br /><div class="hover"><br /><a href="http://www.tetap-belajar.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg99H4Dk_hOz07JAPcnbVCtx6rj3ns8TrvO9K2SklL3bsT_-aBUan3bgwAaXbO0nLzhtzYNe6THZkUUTIA57T3uoZ0ZrGdQ3hiH5zpFERUjVNz8MOJ-X5PSALgriSlNdqtmCOYuMAmCaQoO/s1600/Logo+Unima+Warna.jpg" width="100" height="100"/></a></div><br /></div

link gambar anda bisa ganti sesuai keinginan sobat blogger