Peel Effect :

Hei, fren. After I came there, I finally understood what it was "Page Peel". Previously I was a little confused. Understandably still Newbie. Hehe ..
For those of you who do not know what it was Page Peel, Page Peel is the effect of grooves on the corner of the page. If you still do not understand, then try it and see the effects. Let's try.

Follow this steps :

1. First login to your blogger.
2. Click Layout > Edit HTML.
3. And paste this code

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>

upper this code <b:skin><![CDATA[

4. Then paste this code

#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;
}

upper this code ]]></b:skin>

5. For last paste this code

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

under this code <body>

Nb : change that red sentence with your own feed.

6. Save.

0 comments:

Post a Comment