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>
-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>
<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.
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>
<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>
<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
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Tidak ada komentar:
Posting Komentar