Cara Membuat Auto Zoom Dengan CSS Pada Web dan Blog

Selamat Sore kita berjumpa lagi hari ini untuk mengulas beberapa fitur yang dapat diterapkan pada web dan blog anda..Kebetulan hari ini hujan deras disertai petir yang menyambar-nyambar sepulang kerja sehingga membuat diri saya berhasrat menorehkan jejak di internet agar bermanfaat untuk anda semua. Assalm..Wr..Wb..Semoga anda sehat semua yach..Amin..Kali ini kita akan mengulas tentang Auto Zoom, ini bukanlah sebuah widget tapi sebuah scripting sederhana menggunakan script CSS dimana sebuah gambar akan membesar secara otomatis jika cursor menghampiri gambar tersebut.. Tidak perlu terlalu lama kita berbasa-basi, kita langsung Ke TKP aja yukz... Langkah awal buka template anda, jangan lupa centang expand template widget dulu dan cari tag dan letakan script dibawah ini diatas Tag ]]></b:skin>

Klik Disini Untuk Membuka

.zoom 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} .zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

Simpan template anda..Selesai... Sesederhana itukah? Wait... 
Untuk memanggil kode diatas anda harus membuat tag perintah agar scripting diatas dapat bekerja. 
Dimana anda dapat membuatnya? Anda dapat membuat tag perintah untuk memanggil script diatas pada gambar yang ingin anda berikan efek css auto zoom 
Sabar yach...biar lebih mudah anda mengertinya.. 
Pada saat anda membuat postingan atau membuat halaman pada blog biasanya anda menyisipkan gambar yang terkait dengan konten artikel yang anda tulis. Nah pada saat itulah setelah gambar anda sisipkan anda dapat memberikan efek auto zoom. Pilih Tab Html ( Jangan Tab compose Ya ) kemudian pada gambar yang telah di upload pada artikel biasanya ada link URL. Kita buat Perintah pemanggilannya ya....

<div class="zoomsoftekgoblogtutorial">
<img src="URL GAMBAR YANG ANDA SISIPKAN / UPLOAD" /></div>


Atau anda dapat juga meletakan Perintah pemanggilnya diantara script URL gambar yang cukup panjang diantara
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" /></a>

Diantara script URL Gambar tersebut anda dapat meletakan Tag Pembuka <div class="zoomsoftekgoblogtutorial"> dan disertai Tag Penutupnya  </div>

Contoh :

<div class="zoomsoftekgoblogtutorial"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" /></a></div>

( Pengerjaannya pada Tab HTML ya bukan Tab Compose )

Okey sekian dulu tutorial dari saya semoga akan menjadi manfaat yang banyak untuk anda semua. Dikarenakan hari menjelang magrib saya harus menjalankan ibadah terlebih dahulu. Untuk yang kurang mengerti...come on...trying again lah..pasti bisa koq...tergantung niat untuk berusaha..Selamat mencoba...Wassalam..Wr..Wb..

Posted in: Trick