Site Info


Membuat Efek Auto Zoom Image Di Blogger

Posted by Unknown on 4/18/2014 3 comments

Membuat Efek Auto Zoom Image Di Blogger

Secara default, gambar yang di upload kemudian di publikasikan dalam Blogger pasti tidak akan memiliki efek auto zoom image. Auto zoom image adalah efek untuk  memekarkan (membesarkan) gambar pada saat di dekati oleh kursor mouse. Cara kerjanya sederhana, yaitu kita cukup mengarahkan kursor mouse ke gambar, lalu secara otomatis gambar tersebut akan membesar dengan sendirinya. Menarik bukan?

Saya rasa Anda sudah mengerti gambarannya. Cara membuat efek auto zoom image pada Blogger ini tidak terlalu sulit, kita hanya akan kode CSS (cascading style sheet) saja dalam Edit HTML didalamnya. Nah, untuk membuat efek ini, ikuti langkah-langkah berikut dengan cermat:

1. Pada dasbor, pindah ke Template.

2. Pilih Edit HTML.

3. Cari kode ]]></b:skin>. Untuk mempermudah pencarian kode, tekan Ctrl+F.

4. Jika sudah ketemu, letakkan kode berikut tepat diatas kode ]]></b:skin>.

.post img:hover {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}

5. Simpan Template. Lihat blog Anda untuk menguji coba.

Tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis nulla at odio vestibulum, ut accumsan mauris venenatis. Fusce metus nisl, lacinia at elit eget,
Facebook
Google+
Linkedin
Pinterest
Delicious

3 komentar:

  1. Dian Anarchyta26 April 2014 pukul 14.46

    Syang kodenya menggunakan struktur
    -moz-
    -webkit-
    -o-
    Padahal mau saya pasang di template baru buat effect zoom image...

    BalasHapus
    Balasan
    1. Unknown26 April 2014 pukul 15.15

      oh.. memangnya apa masalahnya jika menggunakan struktur -moz-,-webkit-, dan -o-?

      saya rasa tidak ada masalahnya tuh :D

      Hapus
    2. Unknown27 April 2014 pukul 01.15

      apa mbak Dian AnaR-chyta ini takut struktur -moz-, -webkit-, dan -o- karena tidak valid CSS3 ? :D

      Hapus

Silakan berkomentar dengan bahasa yang baik dan benar. Komentar yang mengandung bahasa kasar, SPAM, dan SARA tidak akan dibalas dan akan ditaruh dalam folder SPAM. Blog ini menerapkan fitur moderasi komentar. Dilarang menyertakan link hidup atau mati serta bentuk promosi lainnya. Terima kasih.