Tips memasang efek terkelupas(peel effect)

Pernah tidak sobat blogger berfikir untuk membuat sesuatu yang beru dengan tampilan blognya? Misalnya dengan membuat efek halaman terkelupas pada sudut template(add peel effect) yang serba guna dan bisa buat pasang add untuk blogger. Tampilannya yang bagus akan menarik perhatian pengunjung blog anda.Selain terlihat keren sangat baik dijadikan tempat memasang iklan.Nah, dengan bantuan javascript sebagai hack ini bekerja pada jquery dan css.
Pertama saya ingin berterimakasih pada sohtanaka untuk membuat jquery hack ini dan kemudian naeemnur untuk membuatnya berfungsi untuk bekerja di blogger.Demo
Sekarang mari kita mulai:
• Loggin ke akun blogger sobat
• Masuk ke layout(element halaman)>Edit Html>Tekan Ctrl+F
• Cari kode dan pasang kode dibawah ini tepat diatasnya

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>

Kode garis merah merupakan url gambar yang ingin Anda tampilkan di add, silahkan sobat rubah sesuai dengan url gambar yang sobat punya.

Sekarang cari tag dan tempat kode di bawah ini setelah itu.

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/anshuldudeja'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>

Dalam kode di atas dua tulisan berwarna  merah adalah url, Satu untuk link ke iklan dan satu ke gambar yang mengupas selama advertisement.

Nah selesai , selamat mencoba.....

Posted in: tips blogger,tips dan trik blog