Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

 <style>#mazzpuji img{float:right;
background:#2b2b2b;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
border:2px solid #2b2b2b;
box-shadow:1px 1px 20px #000;
-moz-box-shadow:1px 1px 20px #000;
-webkit-box-shadow:1px 1px 20px #000;
margin:0px;
-o-transition:margin-left 1.5s ease-in 2s,margin-top 1.5s 2.5s,
-o-transform 1.5s ease-out 1s,opacity 2s ease-in;
-moz-transition:margin 1.5s ease-in 2s,
-moz-transform 1.5s ease-out 1s,opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s,
-webkit-transform 1.5s ease-out 1s,opacity 2s ease-in}
#mazzpuji img:hover{
opacity:0.6;
-o-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-moz-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-webkit-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-o-transition:margin-left 0.5s ease-in 0.4s,margin-top 0.5s,
-o-transform 0.5s ease-out 1.4s,opacity 3s ease-in 4s;
-moz-transition:margin 1.5s ease-in 0.4s,
-moz-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
-webkit-transition:margin 1.5s ease-in 2.4s,
-webkit-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
box-shadow:1px 1px 15px #33F;
-moz-box-shadow:1px 1px 15px #33F;
-webkit-box-shadow:1px 1px 15px #33F;
}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="mazzpuji"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="mazzpuji">
<a href="http://http://mazzpuji.blogspot.com/2013/04/cara-membuat-gambar-berputar-dan.html/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5cKtyfg4jH9y0-l7WuO5hAX8Kvigtm_uzu-nUxwGG5UNGaVcH-J3lE3_PNsufngC0V-2_I8e6K5hkBmhDFHPW0PFP3CCa6WHknqT8DgDgSmAziRMHVMbaHnDVLYT97nI2KkD5vcF1AiF/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Semoga bermanfaat Sobat.