5 Efek foto keren menggunakan JQuery

EFEK FOTO MENGGUNAKAN JQUERY

DEMO

Pada kesmpatan kali ini saya kan membahas bagi mana cara membuat efek foto menggunakan jquery.

Pada dasarnya Menurut saya trik ini hanya lah sebagian trik yang kurang penting. Karna efek yang di berikan pada Blog atau web  hanya sebatas gaya pada tampilan gambar itu sendiri.

Tapi mungkin Di sisi lain Akan berbeda lagi, karna tidak semua orang mempunyai sifat yang sama atau kesukaan yang sama, adakalanya seseorang ingin membuat tampilan gambar pada postingan yang dia punya berbeda dengan tampilan gambar dengan orang lain…

Dan bagi teman-teman yang ingin mencoba trik ini berikut adalah caranya :

• Masuk ke blogger kemudian
• Pilh menu template dan
• Pilh edit HTML dan jangan lupa centang expand widget template kemudian
• Cari kode ]]></b:skin> dengan menngunakan CTRL F
• Paste kode di bawah ini tepat dia tas 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 adalah, cari kode </head> dan paste kode di bawah ini tepat di atas kode </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>

• Selanjutnya adalah... simpan Template.

Untuk penerapannya pada postingan Blog anda adalah..???
pada saat anda sudah selesai mengoupload gambar pada postingan, pilih menu HTML untuk menambahkan effect pada Gambar yang akan di tampilkan,
Dan pada saat membuka menu HTML kode Anchor akan terlihat seperti di bawah ini :

<a href="http://1.bp.blogspot.com/-QCuIHkRJGhQ/UQJ9VQ7ORfI/AAAAAAAAAqo/5P4JkqCemeA/s1600/11111111.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-QCuIHkRJGhQ/UQJ9VQ7ORfI/AAAAAAAAAqo/5P4JkqCemeA/s1600/11111111.png" /></a>

Dan untuk menambahkan effect pada Gambar tersebut adalah: tambahkan class="effect1" seperti kode di Bawah ini :

<a href="http://1.bp.blogspot.com/-QCuIHkRJGhQ/UQJ9VQ7ORfI/AAAAAAAAAqo/5P4JkqCemeA/s1600/11111111.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="effect1" src="http://1.bp.blogspot.com/-QCuIHkRJGhQ/UQJ9VQ7ORfI/AAAAAAAAAqo/5P4JkqCemeA/s1600/11111111.png" /></a>

Jika sobat kurang menyukai Effect1, sobat bisa menggantinya dengan effect yang lain. misalnya effect1 sampai dengan effect5, seperti yang terlihat pada halaman 5 style foto menggunakan Jquery