This is An Awesome Trick Mostly Performed on Many Professional Blogs and Sites.Well This Makes An Attractive Handle On Your Blog/Site.Mostly this is Used to Show Ads,Rss Subscribe,Facebook Follow,and many Such Cases.But in this Case iam Using Rss Subscribe Option Here.Anyway you Can Change it to your Own Content.So Let's See How to Add this to Your Blog :.
So Have the Live Demo of the Widget Before Going to Apply it on to Your blog.
So Have the Live Demo of the Widget Before Going to Apply it on to Your blog.
So Now that You've Viewed the Live Demo.Now Just Skip
to the Procedure to Add the Widget to your Blog.
So Let's See How this happens...
How to Add Page Peel Effect to Blogger:.
Go to Blogger < Design < Edit Html (Old Blogger)
Go to Template < Edit Html < Proceed (New Blogger).
So Now Check the Expand Widget Templates Option.
First of all You've to Add Jquery Plugin to Your Blog. (Ignore this Step if your Blog Already Has Jquery).
So Now Applying the Widget to Blogger :.
Copy the Below Code and Paste it Above </head> tag.
Now Applying the Effect to Blogger..
Here You Can Change the Red Colored Url With Your own Image.
Add the Below Code inside/below <body> Tag.
to the Procedure to Add the Widget to your Blog.
So Let's See How this happens...
How to Add Page Peel Effect to Blogger:.
Go to Blogger < Design < Edit Html (Old Blogger)
Go to Template < Edit Html < Proceed (New Blogger).
So Now Check the Expand Widget Templates Option.
First of all You've to Add Jquery Plugin to Your Blog. (Ignore this Step if your Blog Already Has Jquery).
Paste the Above Code Inside/ Below <head> Tag..<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
So Now Applying the Widget to Blogger :.
Copy the Below Code and Paste it Above </head> tag.
Now After Adding The Above Code Above </head> Section.<style type='text/css'>img { behavior: url(iepngfix.htc) }#pageflip {position: absolute;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 .back-img {width: 50px; height: 50px;overflow: hidden;position: absolute;right: 0; top: 0;z-index:98;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXWuNIzwamjwKjuDKcc4pZe1RuXJ8mZWU4TcLba-IUjIYJXN3onxxxep-4nNhjJg71HnLAZX6S8N2n3R8r9jln6SJ-hCo2El6UqpJV3BEn8dIsCd6x7uIeZi0GRvfPkQqsrA4j4AVnLG8/s1600/rss.png) no-repeat right top #fff;}</style><a href='http://goodinblogging.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIyY1qDMtZ8Kpo2JW8FLwxw6oMFBACTsiu4cZLbEp5klHmxVdo_RbNk6kYheAcLdpyKL1BNLqRGCmQPKs2NsUZjogyrjDakltnUEDaKp8P4n4khVfnC8S73209Yf9-tJC5DRjpPC-Ywkg/s1600/1x1juice.png'/></a><script type='text/javascript'>$(document).ready(function(){//Page Flip on hover$("#pageflip").hover(function() {$("#pageflip img , .back-img").stop().animate({width: '307px',height: '319px'}, 500);} , function() {$("#pageflip img").stop().animate({width: '50px',height: '52px'}, 220);$(".back-img").stop().animate({width: '50px',height: '50px'}, 200);});});</script>
Now Applying the Effect to Blogger..
Here You Can Change the Red Colored Url With Your own Image.
Add the Below Code inside/below <body> Tag.
Now Change the Highlighted url With Your Feed Url or Facebook Fan Page or Anything Else.That's it Now You're Done..
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/Goodinblogging '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNLH9dI4HmBwCwuvphAQke0sUE7tIp_rlg0z5UnXBFiyO61Ohm3X-yhW0lGo7iMjBc1mkMcQFk2V5pr94W4Dm_MsHxMzRLmM5G2pL2y0cpJqWcaRjp3JTqFgzY8KozIZr9f6YtZaOyPidr/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
0 comments:
Post a Comment