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:

Oto Website


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!

Posting Komentar Blogger Disqus

  1. bisa gak gan dibuat secara otomatis

    BalasHapus
  2. @M Fariz Luthfan WakanItu di buat menggunakan Tag Pemanggil dan tidak bisa otomatis.

    Kalo yang otomatis Anda bisa lihat efek gambar yang lain!

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top