Add Peel Effect Into Your Blog


You wouldn't be know how effectively change the appearance of your blog by adding "peel effect" in you blog. I used to find best one for long time, but this one really worked and it suits for all theme as well.

You can now implement this feature by following simple tutorial as always.

Now you can create a professional "peel effect" in your blog. You can see below image how that actually looks like..

This is the "Peel effect will looks like... (click picture to see the real view)


To enable this feature to your blog, you need to add two codes in your template.

Go to your blogger Dashboard, click Layout tab and then click "Edit HTML" tab.

Insert the following codes under <head> section of your template
<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://www.wallheaven.com/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>
After you implemented above codes into your template, you need to add another code into template at <body> section.
<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogspot/nPSr'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Finally, save your template and peel effect will appear in the top right corner section of your template

0 comments:

Post a Comment

Related Posts with Thumbnails

Recent Posts

Business & Economy Directory Subscribe with Bloglines Web Development blogs & blog posts Blog Ratings Books & Literature Blogs - Blog Rankings ExactSeek - Submit 4 FREE Add to Technorati Favorites Add to favourite links On our way to 1,000,000 rss feeds - millionrss.comî Blogging Tips Blogs - Blog Catalog Blog Directory blogarama - the blog directory
Increase web site hits BlogMalaysia.com All Malaysian Bloggers Project