Menambahkan Efek Gambar Keren Di Postingan Blogger

Hallo Sahabat Mafia Hacker , Kali ini saya akan memposting tentang Menambahkan Efek Gambar Keren Di Postingan Blogger. Hmm Sebenarnya apa saja sih Efek Gambarnya?
Ada yang mau tau ?

Kami Mempunyai Efek :

EFEK GAMBAR 1 ( Normal ) = Tidak Ada Yang Di Edit
EFEK GAMBAR 2 (Pop Out) = Mengaktifkan Fungsi OnMouseover dengan CSS
EFEK GAMBAR 3 (Slice Down) = Mengaktifkan Fungsi Irisan dengan CSS
EFEK GAMBAR 4 (Box Random) = Mengaktifkan Fungsi CSS seperti Kotak-Kotak
EFEK GAMBAR 5 (Fold Left) = Mengaktifkan Fungsi CSS Dengan Kotak Dari Kanan
EFEK GAMBAR 6 (Box Rain Grow Reverse) = Mengaktifkan Fungsi CSS dengan Kotak Box Membesar

Oh Ya , Pasti agan Ingin mencoba Caranya kan?

Oh ya sebelum Itu Klik - DEMO - Dulu ya .

Nah ini dia caranya :

Caranya Klik Rancangan , Lalu Masuk EDIT HTML

Lalu Cari Kode ]]></b:skin> Taruh kode dibawah ini diatas Kode ]]></b:skin>

.mbspoli-wrapper
{
margin:auto;
position:relative;
display: inline-block;
}
.mbspoli-wrapper>img
{
position: absolute;
z-index: 1;
}
.mbspoli-before
{
position: absolute;
z-index: 5;
}
.mbspoli-after
{
position: absolute;
z-index: 10;
}
.mbspoli-slice {
display:block;
position:absolute;
z-index:15;
height:100%;
}
.mbspoli-box
{
display:block;
position:absolute;
z-index:15;
}

Lalu Cari Kode </head> Lalu Masukkan kode dibawah ini Diatas atau Dibawah kode </head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://mafiaproject.googlecode.com/files/jquery.mbspoli.minim.js"></script>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
$(function(){
$('.post-body img').mbspoli({
'startEffect' : 'grayscale',
'hoverEffect' : 'normal'
});
});
</script>
</b:if>

Untuk Kode Yang saya beri warna Orange , bila telah ada kode seperti itu sebelumnya sebaiknya kode yang saya beri warna biru jangan Dipasang , kalau dipasang takut nanti akan bentrok CSS nya. Untuk Kode yang saya beri warna Kuning Silahkan Ganti dengan Kode Sesuka Anda . kodenya ada dibawah ini :

EFEK GAMBAR 1 ( Normal )
'startEffect' : 'grayscale',
'hoverEffect' : 'normal'

EFEK GAMBAR 2 (Pop Out)
'startEffect' : 'normal',
'hoverEffect' : 'popout'

EFEK GAMBAR 3 (Slice Down)
'startEffect' : 'overlay'
'hoverEffect' : 'sliceDown'

EFEK GAMBAR 4 (Box Random)
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'

EFEK GAMBAR 5 (Fold Left)
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'

EFEK GAMBAR 6 (Box Rain Grow Reverse)
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'

Nanti bila sudah diganti akan menjadi Seperti ini

<script type="text/javascript">
$(function(){
$('.post-body img').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});
});
</script>

Demikian Tutorial Menambahkan Efek Gambar Keren Di Postingan Blogger yang saya berikan, Semoga bermanfaat :)

#NB : Bila Ada Kode Yang Gagal Harap Hubungi Saya Atau Komentar Di Bawah INI