This is cool effect to your blog.
I used Peel effect for RSS.click below link for Demo.
DEMO
(Top right Corner)
1. Log in to your blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F </head>
3. Paste below code Before </head> tag
4. Now again Find this tag by using Ctrl+F <body>
5. Paste below code After <body> tag
* You can change pink URL with your URL
* You can change RED URL with your Feed URL
6. Now click Save Template.
You are done.
I used Peel effect for RSS.click below link for Demo.
DEMO
(Top right Corner)
1. Log in to your blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F </head>
3. Paste below code Before </head> tag
<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/AVvXsEgyTdLd3zufcAiqS5OPbjQeED3Rm1F8JTcpjcXOXNSPCm-fUnEHR2ThJjNlQO6RqHbtY7WwrKgeUe67OCfyzcLivq0ic1TtYyr0bXrhQqoawP4pJcG0FYvHT7EWjOaoBi-bmYGuE275MkiV/s320/Newspaper-Feed-icon.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>
4. Now again Find this tag by using Ctrl+F <body>
5. Paste below code After <body> tag
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/Bloggertrix'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpo70IAaipeurUPEYC8W16AbbaN36aFqCWMJen6IKj46F8Aak7wHN_AC49K50Pl_Go6XMOy9Llcs_YUBctYyZ6B37AR9HAUH5Al51jwmRDq9QfKGOPC65FO9K2deF9FrOXB8VfNoaMWUtm/s320/peel-image.png'/></a>
<div class='msg_block'></div>
</div>
* You can change pink URL with your URL
* You can change RED URL with your Feed URL
6. Now click Save Template.
You are done.
this is great, thanks
ReplyDeletei cant find code...
ReplyDeletewat to do?
@hari
ReplyDeleteCan you tell me, which code you cant find?
Nice trick bro, may I repost this article ? Dont be worried, I'll put your name as my source. By the way I was added you as friend on blogger, I have vote and following your blog. Good job bro, nice to meet you ! @treasure73
ReplyDeleteI'd like to add this but can't it be done with CSS?
ReplyDeleteI wouldn't want to mess my html template..
Looks interesting...maybe i'll try this! thanks!
ReplyDeleteThank you for adding more impressive Can I change the color black to another color
ReplyDeleteYes you can..
Delete