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