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(http://lh6.ggpht.com/_u4rBCfM4eII/TRiCkY-MFKI/AAAAAAAAA6E/_JhJTgqJ8Ds/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>
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://lh6.ggpht.com/_u4rBCfM4eII/TRiCkY-MFKI/AAAAAAAAA6E/_JhJTgqJ8Ds/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>
Step 2:
Now just below the </head> tag past the following code:
Now just below the </head> tag past the following code:
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/bloggeratnext'><img alt='' src='http://lh3.ggpht.com/_u4rBCfM4eII/TRiCkeY9FmI/AAAAAAAAA6I/2PmdfgINlxk/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
<a href='http://feeds2.feedburner.com/bloggeratnext'><img alt='' src='http://lh3.ggpht.com/_u4rBCfM4eII/TRiCkeY9FmI/AAAAAAAAA6I/2PmdfgINlxk/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Customize:
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
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,
