Posted by : Unknown Monday, February 25, 2013

  • 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/AVvXsEioGqC-dfq0L3DVPu82N2OfnAAh9sPnvobQX0SzTZx8IfO9Gs4rpcBljVkUlwSZ45B8lWnsq_zglgGB5wGEWB_KiOwh_q3xrSmuGoTXSUbzgaqh63O0OSTRI6Vpzg9UvcE6gB5-keUb9gN-/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGqC-dfq0L3DVPu82N2OfnAAh9sPnvobQX0SzTZx8IfO9Gs4rpcBljVkUlwSZ45B8lWnsq_zglgGB5wGEWB_KiOwh_q3xrSmuGoTXSUbzgaqh63O0OSTRI6Vpzg9UvcE6gB5-keUb9gN-/s1600/naruto.jpg" /></a>
Nah untuk menambahkan efek pada gambar tersebut, berikut caranya :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGqC-dfq0L3DVPu82N2OfnAAh9sPnvobQX0SzTZx8IfO9Gs4rpcBljVkUlwSZ45B8lWnsq_zglgGB5wGEWB_KiOwh_q3xrSmuGoTXSUbzgaqh63O0OSTRI6Vpzg9UvcE6gB5-keUb9gN-/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/AVvXsEioGqC-dfq0L3DVPu82N2OfnAAh9sPnvobQX0SzTZx8IfO9Gs4rpcBljVkUlwSZ45B8lWnsq_zglgGB5wGEWB_KiOwh_q3xrSmuGoTXSUbzgaqh63O0OSTRI6Vpzg9UvcE6gB5-keUb9gN-/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

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © 2013 Z-C - Shingeki No Kyojin - Powered by Blogger - Designed by Johanes Djogan -