Web Designing is a profession and these days its growing very fast and CSS is the major factor of web Designing because if anyone know about CSS so he easily customize blogger templates, widgets layouts etc. I try to write many amazing tips of CSS on this site that you apply on your blog and make it more Cute and beautiful.
CSS and JQuery is only for using make your blog Colorful and Shining because if you not use CSS to your blog so your blog visitors are not like your blog and go back without read anything. So its not better for your blog because you loss many visitors of your blog. here I am going to tell you about page peel Effects its very simple and easy you only add some codes in you blog template and you don this so read below and apply this on your blog.
Why You Add Page Peel Effects in your Blog?
you saw on many websites top right corner where websites owners are use this simple trick and increase there earning our any thing else. Yes when you use this trick for increasing your blog earning so I hope you got some better results. I know you think how it is possible. Its possible because when you use page peel for showing ads so page peel attract your blog visitors so he may click on ads so you increase your earning by using page peel effects. I add bluehost ad in page peel effects you click on the below live demo link and see a demo.
Add Page Peel Effects To Blogger:
This is very simple and easy you only follow below steps and add page peel effect to your blog.
Ok Let Start The procedure.
1.Log-in to your blogger account and Click on Template>>Edit HTML.
2. Backup your Template.
3.know Copy below jquery code and paste it below the <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'type='text/javascript'/>
4.after adding this jquery Code again paste below post below the </head>
<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(http://img.bluehost.com/180x150/bh_180x150_01.gif) no-repeat right top #fff;
}
</style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IQ0jEtmpCBIuu3J4XLuPdN8WHPz2Y8JsYKEUAc50YO4InIPlQ3j579RYfA-5xcAMVDEsVHi3VUTlthyqks2sgHrT16MsaYGcOwjPV8b75SruLesaWr0R_GuoKOE5u4J2K6DNDGcrnts/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>
5. Know again Search <body> and paste below code right below the <body>
<div id='pageflip'>
<a href=' http://www.bluehost.com/track/aamirawans/CODE65 '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaknF5e5eR2d9lP2xKzOE8bMzrJ_e1HJicZEIG8VtARKgq_4A7McdaPgTBcuLRwhFD2jlA8ux9_LpMOdt5WFWyLrUM_93IZdOl4STXya5uE6a7xzrDnykXEohcr_7TF-_ap6oaosVrTjZV/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
6.Click on the Save Template.
Note:
Replace Red highlighted text with image url that you want to show.
Replace Blue highlighted text with advertisement link.
Know you are done all things successfully. If you got any problem so write below comment and also subscribe E-mail updates for getting latest tutorials in your e-mail inbox and keep visiting this site because I try to write something new for this site readers.
