How to make Peel Effect in Blogger
Peel effect usual was found for wordpress users, this display shows the pages which rolled up, used to subscribers rss feeds, you can see the image below:
How do I create one?
Find code <b:skin><![CDATA[ and put script below, above <b:skin><![CDATA[ :
Next step, find code ]]></b:skin> put script below, above script ]]></b:skin>
Last step, find code <body>, put script below, under script <body>
look into red script, replace with your feed address, Now, save your template and enjoy the peel effect.
Hopely Usefull
How do I create one?
- Login to your blogger account.
- Select option Layout -> Edit HTML -> do not forget to check "Expand Widget Templates"
Find code <b:skin><![CDATA[ and put script below, above <b:skin><![CDATA[ :
<script src='http://rainbowproject.googlecode.com/files/peelourbloggertricks.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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>
Next step, find code ]]></b:skin> put script below, above script ]]></b:skin>
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://i50.tinypic.com/2ut200j.jpg) no-repeat right top;
text-indent: -9999px;
}
Last step, find code <body>, put script below, under script <body>
<div id='pageflip'>
<a href='YOUR FEED ADDRES' target='_blank'>
<img alt='' src='http://i50.tinypic.com/16lem1d.jpg'/>
<span class='msg_block'/>
</a>
</div>
look into red script, replace with your feed address, Now, save your template and enjoy the peel effect.
Hopely Usefull
Comments
Post a Comment