5 Efek Gambar Menggunakan Jquery

Beberapa blogger menggunakan css untuk memberi efek pada gambar agar terlihat menarik. Kali ini saya akan berbagi trik efek pergerakan pada gambar menggunakan jquery. Gambar akan memperlihatkan pergerakan aktif dan peralihan menawan setelah cursor diarahkan pada gambar tersebut. Hal ini akan menjadi daya tarik tersendiri bagi gambar dipostingan saudara. Baiklah, sekarang mari kita bahas cara memberi efek pada gambar menggunakan jquery. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Kemudian Masukkan kode berikut di atas kode ]]></b:skin>

.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

Selanjutnya msukkan kode berikut di atas kode </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});

});
/*]]>*/

</script>

Selanjutnya Simpan Template
Ketika anda ingin memberikan efek jquery pada gambar posting, sertakan kode berikut. Perhatikan kode biru dan merah.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></a></div>

Ganti kode biru dengan kode merah. Selanjutnya tambahkan juga kode merah hingga menjadi dua seperti contoh di bawah ini.

<div class="effect1" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1" border="0" src="http://2.bp.blogspot.com/-cbDPX6gDf5E/T_mUG8pC0yI/AAAAAAAAHbI/KMZlTGxy3nA/s1600/image-effects-image-2.png" /></a></div>

Kamu dapat menggunakan class="effect1" class="effect2" class="effect3" class="effect4" class="effect5" pada masing-masing gambar untuk memberi perbedaan efek.

Catatan:
Bila anda bingung mencari kode gambar, silahkan ikuti instruksi berikut.
Setelah memasukkan gambar pada saat menulis posting, klik HTML disamping Compose (disebelah kiri atas posting area). Cari kode yang mirip dengan kode di atas. Setiap gambar akan berbeda kodenya. Setelah ketemu ikuti tutorialnya.

Selanjutnya klik Publikasikan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"