CARA MEMBUAT KOTAK AREA DENGAN EFEK ZOOM (MEMBESAR)

Pada kesempatan kali ini saya akan mencoba share tentang bagaimana cara Membuat Kotak Area Dengan Efek Membesar dan Berputar saat disorot mouse.
Maksud dari Kotak Area Dengan Efek Membesar dan Berputar saat disorot mouse adalah kotak yang apabila disorot mouse maka akan Membesar dan Berputar.
Begitulah kira-kira definisi dari judul posting yang saya share untuk anda.

Silahkan lihat demonya , klik disini

Bagaimana keren bukan hehehe..!!

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>
8. Klik simpan template

#tejakode {-o-transition:1.2s ease-out; -moz-transition:1.2s ease-out; -webkit-transition:1.2s ease-out;padding:0.75em;width:80%;color: #FFFFFF;border:1px solid #3b5998;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius: 5px;border-radius:5px;background: #3b5998;}#tejakode:hover {color: #FFFFFF;-o-transform:scale(1.2) translate(40px,40px) rotate(360deg);-moz-transform:scale(1.2) translate(40px,40px) rotate(0deg);-webkit-transform:scale(1.2) translate(40px,40px) rotate(360deg); background:#3b5998;-o-transition: all 1.2s ease-in;-moz-transition: all 1.2s ease-out;-webkit-transition: all 1.2s ease-in;}

Catatan :
360 adalah kotak area tersebut berputar 360 derajat , jika anda tidak ingin kotak tersebut berputar dan hanya membesar saja ,  silahkan ganti angka 360 dengan angka 0 , atau anda ganti sesuai keinginan anda.

Lalu bagaimanakah cara pemakaiannya...?

Cara meletakan di dalam Postingan dan Gadget :
Pada tab HTML ( ingat tab HTML ) , masukkan kode berikut :

<div id="tejakode">Simpan disini apapun terserah anda</div>
<div style="text-align: left;">
<a href="http://ngeblogbarengbareng.blogspot.com/2013/05/cara-membuat-kotak-area-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Semoga bermanfaat...!!!