#under_header{ margin:10px 0; padding:1%; width:98%; }

Jumat, 10 Agustus 2012

Gambar berputar dan membesar saat dilewati mouse


Membuat gambar/Tulisan atau foto berputar dan membesar saat di lewati mouse
Cara nya sebagai berikut::

1. Masuk ke akun blogger
2. Pada menu klick Desain ➨ Edit HTML.

3. Jangan lupa CentangExpand Template Widget ➨ Bckup dulu templatenya untuk berjaga-jaga bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template cari kode </head> 
Jika kesulitan mencarinya  klik F3 atau Ctrl + F dikolom ini
paste </head> ini.

5. Jika sudah ketemu sekarang  letakkan kode script berikut di atas kode tadi.


<style>#otowebsite{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#otowebsite: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);}#website a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>

6. Simpan template.

Untuk menerapkannya di blog atau di image/gambar,  cukup meenyisipkan kode:
<div id="otowebsite"> dan </div>
pada image/gambar yang di inginkan menjadi berputar dan membesar dan jadinya akan seperti ini:

<div id="otowebsite">
<a href="Url tujuan"><img alt="Oto Website" src="Url Gambar" /></a></div>

Keterangan:
  • Ganti teks warna biru dengan Url tujuan.
  • Ganti teks warna merah dengan link gambar.
Jika sudah lalu terbitkan, sekarang coba  arahkan cursor pada image/gambar yang sudah  sisipkan kode tersebut.

Contoh Gambar:
Kode Edit Html gambar di atas :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCXDoNq0JkXYRQ4rjJpcqlDpiTMOZbm_gVJFef4LztQREi9xln9F82IDX1dyald7jg1fUEQIA2R-PIIckJ58SYYqbzMo9O8PIA_GrJH69Gf68Sxozq-8wWNe-AsNitI4_EzHiW1IAIok/s1600/745211521_1561308.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCXDoNq0JkXYRQ4rjJpcqlDpiTMOZbm_gVJFef4LztQREi9xln9F82IDX1dyald7jg1fUEQIA2R-PIIckJ58SYYqbzMo9O8PIA_GrJH69Gf68Sxozq-8wWNe-AsNitI4_EzHiW1IAIok/s1600/745211521_1561308.gif" /></a></div>

Tulisan yg berwarna Merah adalah URL Gambarnya
Untuk membuat kode script Gambar Berputar dan membesar jadinya seperti dibawah

<div id="otowebsite">
<a href="http://toar-tangkere.blogspot.com/"><img alt="Oto Website" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCXDoNq0JkXYRQ4rjJpcqlDpiTMOZbm_gVJFef4LztQREi9xln9F82IDX1dyald7jg1fUEQIA2R-PIIckJ58SYYqbzMo9O8PIA_GrJH69Gf68Sxozq-8wWNe-AsNitI4_EzHiW1IAIok/s1600/745211521_1561308.gif" /></a></div>

Contoh Gambar Berputar dan membesar saat dilewati mouse



Oto Website


$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

Tidak ada komentar:

Posting Komentar