Cara Memuat Efek Zoom In dan Out Pada Gambar Post Blogger

Cara Memuat Efek Zoom In dan Out Pada Gambar Post Blogger

Efek Zoom In & Out - Menghias artikel blog itu penting asalkan tidak berlebihan, karena sesuatu yang berlebihan itu tidak baik. Style Css memiliki banyak varian dan dapat digunakan pada banyak tagg html, salah satu nya adalah image atau gambar. adapun pembahasan kali ini adalah tentang Cara memuat efek zoom in dan zoom out pada sebuah gambar artikel (Post) blogger.

Sederhana saja, kita langsung ke css zoom image post blogger untuk mempersingkat waktu, namun ada sedikit penjelasan tambahan mengenai css zoom image ini yaitu "Css zoom image atau gambar kali ini merupakan salah satu efek hover (mouse hover) jadi gambar akan membesar (zoom out) ketika dilalui oleh mouse saja dan kembali normal ketika tidak lalu mouse, beitu juga dengan css efek zoom in (menyusut/mengecil), berikut css zoom image (gambar) nya.

Css Image Zoom Out (Perbesar Gambar)

.imgscale1 { height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.imgscale1:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}

Css Image Zoom In (Perkecil Gambar)

.imgscale2 { height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.imgscale2:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}

Simpan kedua css tersebut kedalam template blog kamu tepat diatas kode ]]></b:skin> dan kemudian metode penerapan nya (untuk memanggil css tersebut) mulaikah tulis sebuah artikel dan tambahkan gambar dengan tag image seperti berikut ini. kamu juga bisa meletakkan tag image "html" nya pada sebuah widget html sebagi promosi atau iklan offline kamu.

1.Zoom Image Efect Tanpa Link

Tag image berikut ini merupakan gambar tanpa disetai link

<img class="imgscale1" src="url_gambar" /></img>

2.Zoom Image Efect Dengan Link

Yang ini adalah zoom image yang disertai dengan link target

<a  class="imgscale1"   href="url_tujuan"><img  border="0" src="url_gambar" /></a>

3.Contoh Penerapan Lainnya adalah seperti berikut ini.

<center><a title="Advertisment" href="https://goo.gl/9mrasW"target="_blank"><img class="imgscale1" alt="Advertisment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhogcpbIkXKNV5LfqVyAK4vs0e8hJ0oG8A_mSVrIYX_pNvEooEsiBB7NO6SpcBwfdw-p_KfFtEHFXGgUNtvgspIzkauAhA10r6eu4HEp3d7xJe7SBfvV7GNqQzBRSlhewuR0PlJjn2YhyQ/s640/hkri+indonesia.png" width="100%"/></a></center>

Ganti imgscale1 menjadi imgscale2 (Merubah zoom out menjadi zoom in)
Gantu url_tujuan dengan link yang ditargetkan example: http://tukanglistrikpulaubatam.blogspot.com
Ganti url_gambar dengan url gambar yang ingin kamu tampilkan

Nah setelah diterapkan dengan benar, maka hasilnya akan terlihat seperti gambar berikut ini, silahkan arahkan mouse kamau untuk melihat hasil-nya. Gambar dengana style css zoom out akan membesar dan gambar dengan style css zoom in akan mengecil, kedua gambar tersebut juga memiliki link (Link Target) jika di klick akan mengarah ke url lain (artikel lain).



Demikian penjelasan mengenai cara membuat efek zoom in dan efek zoom out pada sebuah gambar postingan atau artikel blog, semoga ini bermanfaat dan dapat membantu  kamu, jangan sungkan memberi komentar, finishing good luck for you.

Tweet