Translate

Cara Membuat Gambar Jika tersentuh Cursor Akan Membesar



    sekarang saya mau berbagi trik lagi sob, Cara Membuat Gambar Jika tersentuh Cursor Akan Membesar, langsung saja sob saya gak mau banyak cingcong kasian nanti kecapean baca pidato saya hehehe :D

ini cara-caranya sob

  • Sobat harus loggin dulu di blogger sobat
  • terus pilih "RANCANGAN" sobat klik TEMPLATE dan pilih EDIT HTML
  • Selanjutnya sobat cari kode ]]></b:skin> untuk lebih mudah untuk mencarinya sobat klik pada text dan tekan tombol Ctrl+F nanti ada kolom dan masukan kode ]]></b:skin> pada kolom tersebut lalu sobat Enter maka akan ketemu kodenya, jika sudah ketemu sobat letakan kode dibawah ini tepat diatas kode ]]></b:skin> 
.hovergallery 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}.hovergallery 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} 
  • Setelah itu sobat klik SIMPAN
  • Jika sobat ingin menaruh efek tersebut pada postingan tersebut, sobat buka postingan sobat dan klik HTML lalu sobat pastekan kode dibawah ini 
<div class="hovergallery"> URL GAMBAR SOBAT </div>

  • Sobat ganti kode yang berwarna merah tersebut dengan url gambar sobat dan sbelum url gambar sobat, sobat kasih <img src=" dan diakhiri dengan " alt="" title="Hosted by imgur.com" />
  • Contohnya seperti dibawah ini sob
<div class="hovergallery"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGAPdd2NI5g6HZCVcJOlDmhYAWTQZLI67Dz64-FStgbiKnvTUGYPMEPCImWXDCSICUN-0LlhBrOr0LfwnysE7tGZ-CpjmltV8ptV7MNHVXWxjj42klu0CpbEYu97uAD67m5ldNbvEh0FB3/s1600/548451_500794236635977_429888052_n.jpg" alt="" title="Hosted by imgur.com" /> </div>

Sekian trik dari saya, semoga berhasil sob :D

0 komentar:

Post a Comment