how to add peel page effect in blog



 
 hey guys ,In this i wanna show you how to add peel page effect in blogger





To add the page peal of effect, that is when you hover over the peal of area you will watch a cool page peal off like effect. This effect is done using jQuery language is pretty amazing. So lets get started. Try out the demo link below where you will see this widget on top right corner.

Demo Link click here


Step 1:
Go to Design >> Edit  HTML and Search for the following tag:

</head>
 And just above the tag mentioned, past the following code.
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9llvpNAiGTDTwU1Uqlo5AD4xkL1hGkVoXgI25FmXPlyxaENnZd1kFnldpvLbjAsG5KSKVF4A2qTk_DWaDuY-zc5fK_xj5CpTDwsl14l2s3Ld-jBsGhKNYudDaaz_SHtIeLH02tNukM9g/) 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>

Step 2: 

Now just below the </head> tag past the following code:
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/bloggeratnext'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQ9DikK4fvJXdoceH2EWbz-ha3Mi_tKuaKMWnnY78nR7Y8slC0Gjxxjw9Kt5z-tLL3syw5apc3-fWno_OKZqQ02MhPsOoiqtAULYs9oDQBe9uLT1sE5fKy8Ee522ggvEQJRyRDJfdEmQ/'/></a>
<div class='msg_block'></div>
</div>
Customize:

Now change the link highlighted in red in (Step 2) with your own feed link. Note its not necessary that you add your feed link, instead you can add any link you want.
Also you  can add your own subscribe button image that you see when you hover over it. This can be done by making another image of dimensions (307 x 308), and then make it diagonally half while making the other part transparent.
Notice in this subscribe image below, the half diagonal part is transparent. Likewise you can just make a triangular image too. Once the image is ready, upload it somewhere online (On your Picasa Webalbum if you want) and replace the red link in (Step 1) this time with your image link.

 

 

 

 


i recomment you that not try tricks on the blogger posts blody html codes
coz they may sometimes become slow down your blog
dont use any third party servers morethan 2 between the posts

no forther causes
enjoy
dont worry about anything. BUT just check out google rules and regulations
I had checked out these stuffs.and i realise that if you work hard on your blog posts you will get what you are aiming.(am sure)
you can also check out blogger stuffs in this blog to make blog more cozy


to do as google guys says
Always make your readers cheer. other than suffering them with ads.
i also recomment to give readers miximised freedom






SHOOT A COMMENT,

Latest posts.