Enak Dibaca – berbagi Informasi Tentang Pembelajran Dunia Blogging
Efek photo memakai jQuery & CSS pada situs atau 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.
D E M O
- 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 :
<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>
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