Selamat pagi kawan, apa kabar hari ini? ya semoga tetap dalam keadaan sehat dan selalu bahagia.
 |
| Efek gambar berputar ketika cursor mouse di atas gambar |
Kali ini saya ingin berbagi cara untuk membuat gambar pada blog agar bisa berputar dan membesar ketika kursor mouse berada di atas gambar tersebut. Sebenarnya tips ini sudah banyak yang posting di blog-blog para master. Tips ini juga saya dapat dari blog sebelah. Tapi saya ingin mempostingnya kembali. Tujuan saya adalah untuk mudah mencarinya kembali apabila ingin menggunakan tips ini di hari yang lain. Sebelum memulainya lihat dulu contohnya di sini :
Widyas Bali Villa, coba klik salah satu gambar yang ada di blog
Bali Villas tersebut, jika anda tertarik mari kita lanjutkan peraktiknya.
Ok kawan kita mulai saja peraktiknya, sebelumnya kita baca BISMILLAH dulu, oke... hehehe...
Pertama login dulu ke account google, atau langsung saja buka
blogspot.com kemudian login dengan account anda. Setelah itu pilih
Template kemudian pilih
HTML. Lihat gambar di bawah ini :
 |
| Edit HTML pada blogspot |
Kemudian setelah itu pilih
Proceed seperti gambar di bawah ini :
 |
| Edit HTML pada Blogspot |
Jangan lupa untuk memberi tanda centang pada
Expand Widget Templates.Setelah itu cari tag kode </head> dengan menggunakan Ctrl+F dan ketik </head>.
Copy code di bawah ini :
<style>#tejahtcganteng{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#tejahtcganteng: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);}#ganteng a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>
Paste code tersebut di atas tag
</head> atau sebelum tag penutup </head> kemudian simpan / save template.
Kalau gak mau repot, copy code diatas dan masukkan ke gadged
HTML/JavaScript kemudian pilih save.
Cara pemakaiannya sebagai berikut :
Tambahkan code atau tag
<div id="tejahtcganteng"> di setiap postingan yang ada gambarnya dan tutup dengan code atau tag
</div>.Contohnya :
<div id="tejahtcganteng"><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxB3KbmNaJYRWJo1tI_uL0aCdxR95nrS6YdT5hSFpHtd-_4yrssgwjtmYoB54TzNyRcrq4My3nyCqVgRC3_bKYnFEVGfKfvCRQLMJBYZIBLsUrHjAXPnu-RhHxIGDDB-Q0xnD-8RNOcbhA/s1600/7balivillas.JPG" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxB3KbmNaJYRWJo1tI_uL0aCdxR95nrS6YdT5hSFpHtd-_4yrssgwjtmYoB54TzNyRcrq4My3nyCqVgRC3_bKYnFEVGfKfvCRQLMJBYZIBLsUrHjAXPnu-RhHxIGDDB-Q0xnD-8RNOcbhA/s320/7balivillas.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Activities</td></tr>
</tbody></table>
</div>
URL yang berwarna merah silahkan anda ganti dengan alamat url gambar anda. Untuk yang URL pertama merupakan ukuran gambar yang besar, sendangkan URL yang ke dua merupakan gambar yang kecil. Untuk code di atas saya ambil dari contoh blog
Bali Villa.
Sekian dulu ya.. semoga bermanfaat.
15.47
Aak
Posted in
