5 Efek Foto Menggunakan jQuery & CSS pada Blog

Hampir semua blogger selalu menggunakan gambar pada setiap postingan mereka dan memang salah satu yang membuat postingan tersebut terlihat rapi dan menarik yakni dengan menambahkan image / gambar ke dalamnya. Tetapi kadang gambar yang ditampilkan tidak mempunyai efek apa-apa alias standard sehingga terkesan kaku dan kurang menarik.

Nah, dari hal tersebut di atas, maka pada kesempatan kali ini saya akan berbagi tentang bagaimana cara menambahkan 5 buah efek dengan menggunakan jQuery dan beberapa potong CSS kedalam template serta bagaimana cara penggunaannya. Untuk live demonya sendiri, silahkan sobat klik link di bawah ini dan jika sudah terbuka, silahkan sorot pada image dan lihat sendiri efeknya.

LIVE DEMO

Bagaimana, menarik bukan...??? Untuk pemasangan kode dan cara penggunaannya sendiri, berikut tutorial singkatnya :

• Seperti biasa, login ke blogger terlebih dahulu.


• Pilih Template » Edit HTML » Proceed (jangan lupa beri centang pada Expand Template Widget)


• Copy CSS di bawah ini dan pastekan tepat di atas tag ]]></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 copy Script di bawah ini dan pastekan tepat di atas tag penutup </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/143237963/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>

• Simpan template.


• Selanjutnya, untuk menerapkannya pada postingan blog, berikut caranya :

Pada saat selesai mengupload gambar ke dalam postingan, pilih HTML kemudian cari kode gambar tersebut dan tambahkan attribut class="effect1" sampai class="effect1" untuk kategory efek yang ingin ditampilkan. Berikut contohnya :

Ketika membuka HTML pada postingan, biasanya kode anchor untuk gambar akan terlihat seperti di bawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtX-VtVOUy39aubN7-7BPhZpc-GFYIo9xzxKV1m_WQrFIEnAzvwkALAEGp4L7QoaE-mXMvGtCdFsQhYuS_er5rMFyJJ_AAJcy_lu-bzThnIYjAdtaETkWc_8J9jjP3dH8Wn0W_Psf-RQl6/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtX-VtVOUy39aubN7-7BPhZpc-GFYIo9xzxKV1m_WQrFIEnAzvwkALAEGp4L7QoaE-mXMvGtCdFsQhYuS_er5rMFyJJ_AAJcy_lu-bzThnIYjAdtaETkWc_8J9jjP3dH8Wn0W_Psf-RQl6/s1600/naruto.jpg" /></a>

Nah untuk menambahkan efek pada gambar tersebut, berikut caranya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtX-VtVOUy39aubN7-7BPhZpc-GFYIo9xzxKV1m_WQrFIEnAzvwkALAEGp4L7QoaE-mXMvGtCdFsQhYuS_er5rMFyJJ_AAJcy_lu-bzThnIYjAdtaETkWc_8J9jjP3dH8Wn0W_Psf-RQl6/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtX-VtVOUy39aubN7-7BPhZpc-GFYIo9xzxKV1m_WQrFIEnAzvwkALAEGp4L7QoaE-mXMvGtCdFsQhYuS_er5rMFyJJ_AAJcy_lu-bzThnIYjAdtaETkWc_8J9jjP3dH8Wn0W_Psf-RQl6/s1600/naruto.jpg" /></a>

class="effect1" adalah kategory image dengan efek zoom pada saat gambar tersentuh oleh pointer mouse. Ganti kode tersebut dengan effect yang lain (class="effect1" sampai dengan class="effect5").