10.21
Aak
Selamat pagi kawan, apa kabar hari ini? ya semoga tetap dalam keadaan sehat dan selalu bahagia.
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 :
Kemudian setelah itu pilih Proceed seperti gambar di bawah ini :
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 :
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 :
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.
 |
| Efek gambar berputar ketika cursor mouse di atas gambar |
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.
Posted in
