728x90 AdSpace

Latest News

30 Julai 2012

5jenis efek untuk gambar pada blog


Jenis2 efek:
effect1 =efek Popout
effect2 =efek SliceDown
effect3 =efek BoxRandom
effect4 =efek FoldLeft
effect5 =efek RainGrowReverse


Sila lihat demo

Cara pemasangan

Login ke blogger dashboard-->Klik Design-->Edit HTML Paste kod di bawah sebelum kod </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>
Paste kod di bawah sebelum kod ]]></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}
Contoh untuk letakkan kod efek,pada gambar yang dikehendaki
<a href="http://3.bp.blogspot.com/-e7YW4XKT5U4/T_rw_DNuAuI/AAAAAAAAB6Y/EnR8WEAsMl8/s1600/bannerfit2.jpg"><img class="effect1" src="http://3.bp.blogspot.com/-e7YW4XKT5U4/T_rw_DNuAuI/AAAAAAAAB6Y/EnR8WEAsMl8/s1600/bannerfit2.jpg" /></a>
*Ubahkan effect1 kepada no effect yang lain sekiranya ingin efek yang berbeza

P/S:Terima kasih kepada saudara Zamzameer yang telah mereka banner untuk blog ini^^
5jenis efek untuk gambar pada blog
  • Blogger Comments
  • Facebook Comments

0 ulasan:

Catat Ulasan

Top