Pada kesempatan kali ini blog Oto Website akan membahas tentang efek gambar pada blog dan kali ini temanya adalah Gambar dengan Zoom Effect. Sebelumnya Oto Website pernah membahas tentang efek gambar sederhana lainnya di antaranya:
Meginstal dan penerapan Gambar dengan Zoom Effect pada blog juga sangat mudah di bandingkan dengan efek gambar sebelumnya.

Untuk lebih jelasnya tentang Gambar dengan Zoom Effect silahkan Anda lihat demo berikut ini.

Live Demo ▼




Cara menginstal Gambar dengan Zoom Effect


1. Masuk ke akun blogger Anda.

2. Pada Dasbor klick Template  Edit HTML.

3. Lalu temukan kode ]]></b:skin> atau </style> bila kesulitan mencari kode HTML silahkan klick DISINI.

4. Lalu letakkan kode berikut tepat di atas kode tadi.

.ow img{

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}


6. Simpan template.


Cara Penerapan atau memanggil Gambar dengan Zoom Effect


1. Sekarang untuk menerapkan Gambar dengan Zoom Effect.

2. Pada saat mengedit postingan masukkan kode berikut.



<a class="ow" href="http://otowebsite.blogspot.com/" target="_blank">
<img src="https://lh3.googleusercontent.com/-R-uhsoNgp-s/AAAAAAAAAAI/AAAAAAAAADc/A1eF2Q9dqKc/s250-c-k/photo.jpg" /></a>


Keterangan:
Ganti teks warna ungu dengan url Anda.
Ganti teks warna kuning dengan url gambar.

Saya rasa cukup untuk kali ini, Silahkan tinggalkan tanggapan atau komentar Anda.

Poskan Komentar Blogger Disqus

  1. cara menghilangkan nya gmna mas? blog ku udh lama pke efek zoom, tapi kurang bagus diliatnya

    BalasHapus
  2. @Rizaluye.blogCukup hapus kode pada tahap 4 pada template Anda.

    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