MENAMPILKAN GAMBAR ZOOMER DI BLOG

Kali ini saya mempostingkan tentang cara memberi efek zoomer pada gambar blog. Memberi efek zoomer. Efek zoomer merupakan efek yang di gunakan untuk menghiasi gambar agar terlihat sedikit menarik. Dengan efek zoomer kita bisa melihat gambar yang ukuran nya kecil diblog. dan juga bisa melihat gambar Cewek lagi bugil untuk di zoom heheheh.........
Okeh langsung aja kita mulai
Lihat contohnya  di bawah ini. SOROT PADA GAMBAR

langsung saja silahkan baca tutorial dibawah ini

Seperti Biasa :
1. login ke akun Blogger anda
2. Masuk Ke Rancangan Elemen Laman
3. Kemudian Tambah Gadget
4. Pilih HTML/Javascript
5. Kemudian copy code dibawah ini


<style type="text/css">

.magnifyarea{ /* Script by www.kikiyo.co.cc Dont Change*/

box-shadow: 5px 5px 7px #818181;

-webkit-box-shadow: 5px 5px 7px #818181;

-moz-box-shadow: 5px 5px 7px #818181;

filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);

background: white;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://wwwkikiyococc.googlecode.com/files/featuredimagezoomer.js">

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

$('#image1').addimagezoom({

zoomrange: [3, 10],

magnifiersize: [300,300],

magnifierpos: 'right',

cursorshade: true,

largeimage: 'http://i732.photobucket.com/albums/ww323/satriya_photo/honda-cbr600rr.jpg'

})

$('#image2').addimagezoom({

zoomrange: [5, 5],

magnifiersize: [400,400],

magnifierpos: 'right',

cursorshade: true,

cursorshadecolor: 'pink',

cursorshadeopacity: 0.3,

cursorshadeborder: '1px solid red',

largeimage: 'http://i732.photobucket.com/albums/ww323/satriya_photo/honda-cbr600rr.jpg'

})

$('#image3').addimagezoom()

})

</script>

<p><img id="image1" border="0" src="http://i732.photobucket.com/albums/ww323/satriya_photo/honda-cbr600rr.jpg" style="width:300px;height:225px" /><p></p></p>



Ubah tulisan berwarna biru dengan url gambar anda

6. Simpan.

by: kikiyo

Posted in: belajar ngeblog