Jumat, 23 Agustus 2013

Cara Membuat Zoom Gambar Postingan Blog

Kebanyakan para blogger lebih senang menampilkan posting disertai gambar hal ini akan lebih menarik dan membuat pembaca lebih memahami postingan blog. Tapi, sebagian besar gambar yang mereka sisipkan dalam posting berukuran kecil sampai sedang. Hal ini dipilih para blogger karena  akan membuat tampilan posting blog terkesan rapi. Jadi untuk anda yang suka kerapian, tapi ingin gambar yang anda sisipkan di posting tetap terbaca dan berguna silahkan gunakan "Zoom Gambar Posting Blog". Berikut langkah memasangnya : 

Memasang Efek Zoom Gambar pada semua posting :

1. Logging ke blog anda.
2. Pilih "Template" -> "Edit HTML"
3. Cari code ]]></b:skin> gunakan F3 untuk mempermudah pencarian.

gambar template HTML zoom

4. Silahkan copy code ini, tepat diatas ]]></b:skin>.

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

5. Simpan.

Sekarang coba anda lihat blog anda. Setiap gambar pada blog anda akan membesar otomatis jika dilalui kursor.

Sekian posting saya hari ini, semoga bermanfaat. Jika ada hal yang kurang mengerti silahkan bertannya dengan bahasa yang sopan.

Memasang Efek Zoom pada sebagian gambar di posting :

gambar zoom

Efek Zoom kebalikan adalah efek tampilan gambar dari gambar kecil ke gambar besar. Tapi Efek ini hanya berlaku pada sebagian gambar yang anda pilih dan tidak berlaku untuk seluruh gambar yang anda posting. Jika anda penasaran, berikut langkah yang harus anda ikuti untuk mencobanya : 

1. Logging ke blog anda.
2. Tambahkan entri untuk menulis artikel baru.
3. Pilih HTML pada pojok kanan atas pada jendela penulisan entri.
4. masukkan code berikut :


<style type="text/css"> border: none; vertical-align: top; </style> <script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"> </script><img border="0" class="expando" height="100" src="http://seoconia8.com/wp-content/uploads/2012/12/img-ref-01-200x300.png" width="100" />

5. Ganti URL berwarna biru dengan alamat URL gambar anda, ganti panjang dan lebar sesuai keinginginan anda.
6. Simpan, Lihat hasilnya akan seperti gambar zoom di atas.

Tidak ada komentar:

Posting Komentar

mohon memberi komentar dengan bahasa baku dan sopan.