Membuat Page Feel Efect Bloger Dengan JQuery

Posted by : Unknown Rabu, 17 November 2010

Salam sobat blogger, di hari Rabu yang cerah ini tepat di Hari raya Idul Adha 1431 H. Saya akan posting satu buah tips yang bagus (menurut saya). Postingan kali ini saya ingin berbagi lagi kepada para sahabat semua tentang cara Membuat Page Feel Efect Blogger Dengan JQuery untuk Template Blogger. Apa yang dimaksud dengan Page Feel Efeck?? Mungkin sobat pernah mengunjungi suatu blog dan ketika kursor pointer menunjukan ke sudut kanan atas blog, tiba tiba halaman tersebut terlipat?? Itulah yang di sebut dengan Page Feel Efeck, untuk lebih jelasnya adalah seperti pada gambar di bawah ini :

Sebelum tersentuh pointer :

Ketika tersentuh pointer Sudut Halaman Blog terlipat seperti pada gambar berikut :

Nah gimana sahabat tertarik?? berikut langkah-langkah pembuatannya :

Seperti biasa Login ke-bloger sobat
Tataletak --->> Edit HTML
Kemudian cari kode </head> kemudian letakkan kodoe di bawah ini tepat diatas kode tadi

<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

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

});
</script>

Sekarang tambahkan kode berikut setelah kode <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/Indahnya-Berbagi'><img alt='' src=http://sites.google.com/site/amatullah83/gambar-untuk-tutorialku/page_flip.png'/></a>
<div class='msg_block'></div>
</div>