Page Peel Effect From Sohtanaka.com

Posted 09.54 by popo in Label: , , , ,

Baca Posting dalam Bahasa Indonesia klik di sini

image If you often visit my blog, then you aware there is a new thing on the top-right corner of my blog. Now, try to move your mouse over the RSS logo, and you’ll see what happen. The page will peel automatically. This effect called page peel effect. I applied this trick that i’ve got from O-Om.com. According to O-om, this trick is using script made by Sohtanaka.com. And you can see the demo here.

The coding is very simple, i think everyone can apply this code to their blog without any problem. I have tried this trick once and succeed.

So, do you want to have this on your blog? Let’s follow the steps.

Step 1:

Put this jQuery script code above this code <b:skin><![CDATA[

<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>

Step 2:

Then put this CSS code above this code ]]></b:skin>

#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://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Step 3:

Then put this code under <body> tag

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/yourfeedname>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Don’t forget to change the code “yourfeedname” in red color with your feed name. Save your work and that’s it. You can see the result on your blog. Remember, you can change the image and link to meet your requirement. Good luck!

Source : O-Om.com 

This blog is sponsored by:



5 comment(s) to... “Page Peel Effect From Sohtanaka.com”

5 komentar:

kandex mengatakan...

hmmmm... boleh juga nih.. ntar gw coba dulu..

sukses sob... terus berkarya



Haedir GokiL mengatakan...

wuaaa kagak meger gw, bahasa inggris ada gak bahasa jawa atau makassar ??? :D :D :D

nice blog kwandd :)

salam kenal



kampret mengatakan...

sip sip sip...
d coba dulu...:)



Sudino Dinoe mengatakan...

Nice content..and nice info



arius ridwan mengatakan...

link artikel bahasa indonesia-nya kok ga bisa ya sob? btw, repost nya bagus. i'll try



Poskan Komentar