Tutorial

  • Android
  • Blogger
  • Printer
  • Computer
  • Laptop
  • MedSos
  • Cara Memberikan Efek Auto Zoom Gambar Postingan Blog

    Salah satu cara untuk melengkapi atau mendukung penjelasan postingan blog adalah dengan melampirkan gambar hasil dokumentasi. Ada banyak cara dalam mempercantik tampilan gambar pendukung postingan blog agar terlihat lebih menarik dimata pengunjung, diantaranya efek getar dan efek auto zoom ketika gambar terbuka atau disorot kursor mouse. Untuk efek getar mantul sudah Admin bahas pada postingan sebelumnya, dan pada postingan kali ini admin akan membahas cara memberikan efek Auto Zoom pada gambar yang ada dalam konten postingan blog gambar gambar terlihat serti hidup sehingga tidak membosankan.

    Cara penerapannya sangatlah mudah, hanya dengan menambahkan source code HTML pada area code HTML Themplate melalui menu Edit HTML. 

    Langsung saja cari kode ]]></b:skin> untuk memudahkan pencarian gunakan fitur pencarian dengan cara menekan kombinasi tombol CTRL + F. 




    Download Source Code Auto Zoom dan Letakkan kode berikut ini tepat di atas kode ]]></b:skin> seperti gambar di bawah ini: 

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




    Klick Simpan untuk menerapkan, dan coba buka salah satu postingan blog yang mengandung gambar pendukung, seperti pada contoh berikut ini:





    Ketika gambar Run Diskpart tersorot mouse maka akan secara otomatis Auto Zoom




    Jika skala zoom gambar dirasa kurang besar atau terlalu besar, kalian bisa melakukan setting skala pada source kode pada bagian scale, misal 1.7 bisa kalian rubah menjadi 1.2 (memperkecil) atau 2.0 untuk memperbesar skala zoom. 

    Demikianlah Tutorial cara membuat dan memberikan efek auto zoom pada tampilan gambar postingan blog, semgoa bermanfaat dan terima kasih telah berkunjung, admin tunggu kunjungannya kembali di lain waktu. 
    Want to subscribe to the Latest Post Update Notification? Please Join with Us Berbagi Tutorial Online WhatsApp Grup or Blogger SEO Knowledge On Google News
    Artikel Terkait:
    Help Support this Blog with Like FansPage, Subscribe and Share. If anything is unclear, please leave a message in the comments column
    Comment Now