Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse

Untuk membuat pengunjung betah berada di blog kita dan untuk mempercantik blog kita tercinta, gak ada salahnya kalo sobat mempercantiknya dengan Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse.

Untuk itu blog ini akan membahasnya agar blog teman-teman semakin cantik, keren, dan apalah namanya.

Sedikit contohnya adalah seperti gambar memutar di samping, eh itu bukan contoh itu kan cuma gambar gif biasa yang menggunakan lambang blog O.W(Oto Website) hehehe . . .

Tenang aja kalo sobat belum ngerti dengan maksud postingan/articles ini nanti juga sobat bakalan ngerti kok, karna saya sudah menyiapkan demonya untuk sobat semua.

Seperti yang saya katakan di atas bagi sobat yang belum ngerti dengan Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse, sobat bisa arahkan mouse sobat ke gambar/image berikut:

Demo

Kalo sobat bertanya itu foto siapa, itu adalah foto tunangan saya dan adiknya(huh pamer)!

Eh kok gak muter dan membesar fotonya, hehehe . . . sori karna saya tidak menerapkannya Efek Memutar Dan Membesar ke blog ini, untuk melihat demonya sobat bisa lansung menuju link demo yang sudah saya siapkan, lalu sobat arahkan cursor sobat ke gambar/image yang sama dengan gambar di atas.

Nah udah tau kan maksudnya? gimana menarik gak? apa sobat berminat menerapkannya ke blog sobat?
Kalo iya mari sekarang kita bahas Cara memasang dan menerapkan Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse pada blog sobat, untuk cara memasangnya mudah saja kok, gak percaya? ikuti aja langkah-langkah berikut:

1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML.

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

4. Selanjutnya dalam Edit Template sobat cari kode </head>  Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu sekarang sobat 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 sobat, sobat cukup meenyisipkan kode:
<div id="otowebsite"> dan </div>
pada image/gambar yang sobat 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 sobat arahkan cursor pada image/gambar yang sudah sobat sisipkan kode tersebut.

Keterangan tambahan:
Sobat juga bisa lansung upload foto seperti biasanya pada saat membuat atau mengedit postingan, biasanya jika upload  gambar/image di postingan maka kode Edit HTMLnya seperti ini:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM5BKyl8rlkZ-q0IWzu5VEnmEL-hcPju4hehUzCabko_cRwZRX8yhitbAZBFNzH9xpooJsoRjz1eMlZwQFHpgTLeqzCFlw-vb0k13ihAA3AeNKc0iHL3SMiDvygS8WIDd37oTNnyL1bEk/s1600/fans.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM5BKyl8rlkZ-q0IWzu5VEnmEL-hcPju4hehUzCabko_cRwZRX8yhitbAZBFNzH9xpooJsoRjz1eMlZwQFHpgTLeqzCFlw-vb0k13ihAA3AeNKc0iHL3SMiDvygS8WIDd37oTNnyL1bEk/s320/fans.jpg" width="320" /></a></div>

Nah jika sobat upload image/gambar via postingan maka kode </div> sudah lansung ada, maka sobat hanya perlu menyispkan kode <div id="otowebsite"> saja dan jadinya akan seperti ini:

<div class="separator" style="clear: both; text-align: center;">
<div id="otowebsite">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM5BKyl8rlkZ-q0IWzu5VEnmEL-hcPju4hehUzCabko_cRwZRX8yhitbAZBFNzH9xpooJsoRjz1eMlZwQFHpgTLeqzCFlw-vb0k13ihAA3AeNKc0iHL3SMiDvygS8WIDd37oTNnyL1bEk/s1600/fans.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM5BKyl8rlkZ-q0IWzu5VEnmEL-hcPju4hehUzCabko_cRwZRX8yhitbAZBFNzH9xpooJsoRjz1eMlZwQFHpgTLeqzCFlw-vb0k13ihAA3AeNKc0iHL3SMiDvygS8WIDd37oTNnyL1bEk/s320/fans.jpg" width="320" /></a></div>

Mudah bukan!

Oke saya rasa cukup untuk kali ini, silahkan tinggalakan tanggapan atau komentar sobat tentang postingan atau articles di atas!