Efek photo memakai jQuery & CSS pada situs atau blog

Enak Dibaca – berbagi Informasi Tentang Pembelajran Dunia Blogging


Efek photo memakai jQuery & CSS pada situs atau blog




5 Efek Foto dengan jQuery & CSS pada Blog

Tutorial Blog | Tips 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.
D E M O 




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=”http://1.bp.blogspot.com/-Z3qe33eyOMw/UORN4OG1jfI/AAAAAAAACjM/rI-LoSn_Sik/s1600/naruto.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://1.bp.blogspot.com/-Z3qe33eyOMw/UORN4OG1jfI/AAAAAAAACjM/rI-LoSn_Sik/s1600/naruto.jpg” /></a>


Nah untuk menambahkan efek pada gambar tersebut, berikut caranya :

<a href=”http://1.bp.blogspot.com/-Z3qe33eyOMw/UORN4OG1jfI/AAAAAAAACjM/rI-LoSn_Sik/s1600/naruto.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img class=”effect1″ border=”0″ src=”http://1.bp.blogspot.com/-Z3qe33eyOMw/UORN4OG1jfI/AAAAAAAACjM/rI-LoSn_Sik/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″).


Semoga Bermanfaat
Belajar Blog , Tips Edit Blog, Tutorial Belajar Blog, Tips dan Trik Blog, Cara Membuat Blog Lebih Menarik
Sumber




Terima kasih telah berkunjung, semoga artikel Efek photo memakai jQuery & CSS pada situs atau blog bermanfaat.

Nah itulah info harga yang enak dibaca dari ALAP ALAP PSHT, semoga bermanfaat

Prediksi Bola
Judul: Efek photo memakai jQuery & CSS pada situs atau blog
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Bagus Riyanto

Admin mengucapkan terimakasih atas kunjungan Sobat,Minta Crotnya dong..eheheh

0 comments :

Post a Comment

 
 
 
 
Copyright © Alap Alap PSHT didukung oleh aejos.com
Premium Blogger Themes by Prediksi Akurat