Assalamualaikum Wr.wb
Senang anda membaca artikel tutorial blog saya kali ini setelah sekian lama jarang menulis dengan tema tersebut. Kali ini kita akan belajar cara membuat “efek zooming” pada gambar atau foto blog kita dengan menggunakan jquery. Dengan memanfaatkan fitur jquery gambar kecil yang terdapat di postingan apabila di klik sekali maka gambar tersebut akan menjadi lebih besar dan begitu seterusnya akan menjadi lebih besar setiap kali anda klik.
Come on bro check it out……………….
Berikut langkah-langkahnya:
- Login ke blogmu, lalu pilih menu "Rancangan"" --> "Edit HTML", kemudian centang pada box "Expand Template Widget".
- Carilah kode , untuk mempersingkatnya gunakan fasilitas ctrl + f dan jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode .
Ket: apabila kode berwarna biru sudah ada pada html templatemu, maka yang dicopy-pastekan adalah kode dibawahnya saja yang berwarna hitam.
- Kemudian simpan template sobat.
- Untuk memasukkan efek zoom pada gambar maka copy-pastekan kode berikut pada postingan atau widget yang dimana sobat ingin menaruh gambar yang akan diberi efek zoom. Berikut kodenya:
- Ganti teks berwarna merah dengan link dari gambar sobat. Kode berwarna biru adalah tinggi dan lebarnya gambar yang dapat sobat atur, ubah dan sesuaikan dengan keinginan sobat.
- Jika ingin memasukkan efek zoom lagi pada gambar yang lain, ulangi lagi langkah ke-4 untuk setiap kali memberikan efek zoom pada gambar yang lain.
Tidak ada komentar:
Posting Komentar
beri komentar