mianshehzadmian: Add Page Peel effect

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: dashed; border-bottom-width: 1px; color: #666666; font-family: 'Bree Serif', serif; font-size: 45px; font-weight: normal; line-height: 50px; margin: 0px 0px 20px; padding: 0px 0px 10px; text-align: left;">Add Page Peel effect </h2><div><div class="post-outer" style="background-color: white; color: #666666; font-family: Lora, Georgia, serif; font-size: 18px; line-height: 29px; margin: 0px; padding: 0px;"><div class="post hentry" style="margin: 20px 0px; padding: 10px 18.046875px;"><div class="post-body entry-content" id="post-body-4957530721584291664" style="margin: 0px; padding: 0px; word-wrap: break-word;"><div dir="ltr" style="margin: 0px; padding: 0px;" trbidi="on"><span style="color: #222222; font-family: sans-serif; font-size: xx-small; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">Step 1: Add jQuery plugin (<blink style="color: #999999; margin: 0px; padding: 0px;">if your blog have a jquery plugin,ignore this step</blink>)</b></span><br style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 15px; margin: 0px; padding: 0px;" /><ul style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 1.4; list-style: none; margin: 0.5em 0px; padding: 0px 2.5em;"><li style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jjK_V8QXhvagLilHhIJdPVqepUMyWP5zXLpWnhpWoBCrHo1318rfhqeeMUMPC90t1g64B7ujVDIp6tQpbzCTOYhdKBxUfk5fbDjIfdvtBn4wq14qcXoGH9wAlSaoRqhx5UhvPVxn7fej/s1600/p-con-li.png); background-position: 15px 3px; background-repeat: no-repeat; list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px; position: relative;"><span style="font-size: xx-small; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">Copy the below code inside <head></b></span></li></ul><blockquote style="background-attachment: initial; background-clip: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvdV1mO6lLaiietE6RAjbCdigxsiyrYRIe_hVoXWCdhU1nounyfdJgIfxXml2PkzDOZWwoahXWFarqfLWpjXGe7hh9a9cfGBVLzPHktzFg5xALxYB9QKN6XcBNYNtneYrD4u41F98LKY4/s1600/quote.png); background-origin: initial; background-position: 5.400000095367432% 50%; background-repeat: no-repeat; background-size: initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(221, 221, 221); border-style: dashed dashed dashed solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 2px 0px 2px 6px; box-shadow: rgb(171, 171, 171) 0pt 0pt 14px; color: #222222; font-family: Georgia, Times, serif; font-size: 15px; font-style: italic; line-height: 1.5; margin: 10px 20px; padding: 8px 9px; quotes: '';"><div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); margin: 0px; padding: 3px 7px;"><span style="margin: 0px; padding: 0px;"><script src='<a class="smarterwiki-linkify" href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" style="border: 0px; color: #1a74ba; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</a>' type='text/javascript'/></span></div></blockquote><br style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 15px; margin: 0px; padding: 0px;" /><h2 class="h2title" style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOMk_SE8fMkxTgvFDzv_OSSpIeq6rnk37bPstkYaxS4Qy288pjhdZ6-_HtEjKQV6NLhN0hFFKVTVOR1fUaeWIb-nu66ic94rIUY0MsKSmHhB0IoLGoE3YCFAPAYhETtrE15g0duIhmllk/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; line-height: 44px; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">Add Page Peel Effect To Blogger Blog </h2><span style="color: #222222; font-family: sans-serif; font-size: xx-small; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">Step 2 : </b></span><br style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 15px; margin: 0px; padding: 0px;" /><ul style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 1.4; list-style: none; margin: 0.5em 0px; padding: 0px 2.5em;"><li style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jjK_V8QXhvagLilHhIJdPVqepUMyWP5zXLpWnhpWoBCrHo1318rfhqeeMUMPC90t1g64B7ujVDIp6tQpbzCTOYhdKBxUfk5fbDjIfdvtBn4wq14qcXoGH9wAlSaoRqhx5UhvPVxn7fej/s1600/p-con-li.png); background-position: 15px 3px; background-repeat: no-repeat; list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px; position: relative;">Go to Design->Edit HTML</li><li style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jjK_V8QXhvagLilHhIJdPVqepUMyWP5zXLpWnhpWoBCrHo1318rfhqeeMUMPC90t1g64B7ujVDIp6tQpbzCTOYhdKBxUfk5fbDjIfdvtBn4wq14qcXoGH9wAlSaoRqhx5UhvPVxn7fej/s1600/p-con-li.png); background-position: 15px 3px; background-repeat: no-repeat; list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px; position: relative;">Copy and paste the below code above <b style="margin: 0px; padding: 0px;"></head></b></li></ul><div class="code1" style="background-attachment: scroll; background-color: #fff4e0; background-image: none; background-position: 0px 0px; background-repeat: repeat; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(255, 174, 0); box-shadow: 2px 2px 0px; color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 9px 2px 15px 0px; padding: 3px 0px 3px 64px; position: relative;"><style type='text/css'><br style="line-height: 15px; margin: 0px; padding: 0px;" />img { behavior: url(iepngfix.htc) }<br style="line-height: 15px; margin: 0px; padding: 0px;" />#pageflip {<br style="line-height: 15px; margin: 0px; padding: 0px;" />position: absolute;<br style="line-height: 15px; margin: 0px; padding: 0px;" />right: 0; top: 0;<br style="line-height: 15px; margin: 0px; padding: 0px;" />float: right;<br style="line-height: 15px; margin: 0px; padding: 0px;" />}<br style="line-height: 15px; margin: 0px; padding: 0px;" />#pageflip img {<br style="line-height: 15px; margin: 0px; padding: 0px;" />width: 50px; height: 52px;<br style="line-height: 15px; margin: 0px; padding: 0px;" />z-index: 99;<br style="line-height: 15px; margin: 0px; padding: 0px;" />position: absolute;<br style="line-height: 15px; margin: 0px; padding: 0px;" />right: 0; top: 0;<br style="line-height: 15px; margin: 0px; padding: 0px;" />-ms-interpolation-mode: bicubic;<br style="line-height: 15px; margin: 0px; padding: 0px;" />}<br style="line-height: 15px; margin: 0px; padding: 0px;" />#pageflip .back-img {<br style="line-height: 15px; margin: 0px; padding: 0px;" />width: 50px; height: 50px;<br style="line-height: 15px; margin: 0px; padding: 0px;" />overflow: hidden;<br style="line-height: 15px; margin: 0px; padding: 0px;" />position: absolute;<br style="line-height: 15px; margin: 0px; padding: 0px;" />right: 0; top: 0;z-index:98;<br style="line-height: 15px; margin: 0px; padding: 0px;" />background: url(<b style="color: red; margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px;"><a class="smarterwiki-linkify" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DPvi0jgdXA5yuZo5wDPgbd5Fg8Us8JBj1FOBHLs5yDLTcE3b-H0MHRS34r5zCkz2sOXXIN8zUShumu0vIG2XcavUyl7X_CRSdep76NZITsJg1w2QS2yNRsP6K5CWVBlCpxkxHzHxn6w/s200/rss+netoops+blog+page+peel.png" style="border: 0px; color: #1a74ba; margin: 0px; outline: none; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DPvi0jgdXA5yuZo5wDPgbd5Fg8Us8JBj1FOBHLs5yDLTcE3b-H0MHRS34r5zCkz2sOXXIN8zUShumu0vIG2XcavUyl7X_CRSdep76NZITsJg1w2QS2yNRsP6K5CWVBlCpxkxHzHxn6w/s200/rss+netoops+blog+page+peel.png</a></span></b>) no-repeat right top #fff;<br style="line-height: 15px; margin: 0px; padding: 0px;" />}<br style="line-height: 15px; margin: 0px; padding: 0px;" /><span style="margin: 0px; padding: 0px;"></style><a href='<a class="smarterwiki-linkify" href="http://netoopsblog.blogspot.com/" style="border: 0px; color: #1a74ba; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;">http://netoopsblog.blogspot.com</a>'><img src='<a class="smarterwiki-linkify" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqFMsmFkLSV1grgW-a6gUYVp9Od7K9qHlYyrnGYdW3h9o1GHrrLcGeiP7RNzUQumCnum1tuZcj6rpchvYokxqHv6fmxMAFFLQCncxyXhjbl9VIFxbasfT7rPFO2nr0NthAoxsZRvzJjA4/s1600/1x1juice.png" style="border: 0px; color: #1a74ba; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqFMsmFkLSV1grgW-a6gUYVp9Od7K9qHlYyrnGYdW3h9o1GHrrLcGeiP7RNzUQumCnum1tuZcj6rpchvYokxqHv6fmxMAFFLQCncxyXhjbl9VIFxbasfT7rPFO2nr0NthAoxsZRvzJjA4/s1600/1x1juice.png</a>'/></a><script type='text/javascript'></span><br style="line-height: 15px; margin: 0px; padding: 0px;" />$(document).ready(function(){<br style="line-height: 15px; margin: 0px; padding: 0px;" />//Page Flip on hover<br style="line-height: 15px; margin: 0px; padding: 0px;" />$(&quot;#pageflip&quot;).hover(function() {<br style="line-height: 15px; margin: 0px; padding: 0px;" />$(&quot;#pageflip img , .back-img&quot;).stop()<br style="line-height: 15px; margin: 0px; padding: 0px;" />    .animate({<br style="line-height: 15px; margin: 0px; padding: 0px;" />    width: &#39;307px&#39;,<br style="line-height: 15px; margin: 0px; padding: 0px;" />    height: &#39;319px&#39;<br style="line-height: 15px; margin: 0px; padding: 0px;" />    }, 500);<br style="line-height: 15px; margin: 0px; padding: 0px;" />    } , function() {<br style="line-height: 15px; margin: 0px; padding: 0px;" />    $(&quot;#pageflip img&quot;).stop()<br style="line-height: 15px; margin: 0px; padding: 0px;" />    .animate({<br style="line-height: 15px; margin: 0px; padding: 0px;" />    width: &#39;50px&#39;,<br style="line-height: 15px; margin: 0px; padding: 0px;" />    height: &#39;52px&#39;<br style="line-height: 15px; margin: 0px; padding: 0px;" />    }, 220);<br style="line-height: 15px; margin: 0px; padding: 0px;" />$(&quot;.back-img&quot;).stop()<br style="line-height: 15px; margin: 0px; padding: 0px;" />    .animate({<br style="line-height: 15px; margin: 0px; padding: 0px;" />    width: &#39;50px&#39;,<br style="line-height: 15px; margin: 0px; padding: 0px;" />    height: &#39;50px&#39;<br style="line-height: 15px; margin: 0px; padding: 0px;" />    }, 200);<br style="line-height: 15px; margin: 0px; padding: 0px;" />});<br style="line-height: 15px; margin: 0px; padding: 0px;" />});<br style="line-height: 15px; margin: 0px; padding: 0px;" /></script></div><span style="color: #222222; font-family: sans-serif; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">Step 3:</b></span><br style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 15px; margin: 0px; padding: 0px;" /><ul style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 1.4; list-style: none; margin: 0.5em 0px; padding: 0px 2.5em;"><li style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jjK_V8QXhvagLilHhIJdPVqepUMyWP5zXLpWnhpWoBCrHo1318rfhqeeMUMPC90t1g64B7ujVDIp6tQpbzCTOYhdKBxUfk5fbDjIfdvtBn4wq14qcXoGH9wAlSaoRqhx5UhvPVxn7fej/s1600/p-con-li.png); background-position: 15px 3px; background-repeat: no-repeat; list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px; position: relative;"><span style="font-size: x-small; margin: 0px; padding: 0px;"><span style="font-size: xx-small; margin: 0px; padding: 0px;">Copy the below code inside<b style="margin: 0px; padding: 0px;"> <body>  </b>or  <b style="margin: 0px; padding: 0px;"><body ...............></b>  </span><b style="margin: 0px; padding: 0px;"><br style="line-height: 16px; margin: 0px; padding: 0px;" /></b></span></li></ul><div class="code1" style="background-attachment: scroll; background-color: #fff4e0; background-image: none; background-position: 0px 0px; background-repeat: repeat; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(255, 174, 0); box-shadow: 2px 2px 0px; color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 9px 2px 15px 0px; padding: 3px 0px 3px 64px; position: relative;"><div id='pageflip'><br style="line-height: 15px; margin: 0px; padding: 0px;" /><a href='<b style="color: blue; margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px;"> <a class="smarterwiki-linkify" href="http://feeds.feedburner.com/HackingAndblogging" style="border: 0px; color: #1a74ba; margin: 0px; outline: none; padding: 0px; text-decoration: none;">http://feeds.feedburner.com/HackingAndblogging</a></span></b><span style="margin: 0px; padding: 0px;"> '><img alt=' Hacking And Blogging' src='<a class="smarterwiki-linkify" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-OLkBBHRc-pHW-jrFRSdfc578RySQuP-U9zVPZH829Xw-yNVamB4EKcFMFnEmEVubRqJOxj68MV02tbrD61maEjCvilSrgq9iHRTuS73zGrzP3xLb9KfFD25fyXqz0HttyBz_0ytduHS/s1600/page_flip.png" style="border: 0px; color: #1a74ba; font-weight: bold; margin: 0px; outline: none; padding: 0px; text-decoration: none;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-OLkBBHRc-pHW-jrFRSdfc578RySQuP-U9zVPZH829Xw-yNVamB4EKcFMFnEmEVubRqJOxj68MV02tbrD61maEjCvilSrgq9iHRTuS73zGrzP3xLb9KfFD25fyXqz0HttyBz_0ytduHS/s1600/page_flip.png</a>'/></a></span><br style="line-height: 15px; margin: 0px; padding: 0px;" /><div class='back-img'/><br style="line-height: 15px; margin: 0px; padding: 0px;" /></div></div><span style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;">Change can the </span><b style="color: red; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;">RED</b><span style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;"> highlighted text with url image url that you want,else leave it default(needn't change)</span><br style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 15px; margin: 0px; padding: 0px;" /><span style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;">Change the </span><b style="color: blue; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;">BLUE</b><span style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;"> highlighted text with your feed URL or place your advertisement</span><br style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 15px; margin: 0px; padding: 0px;" /><ul style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 1.4; list-style: none; margin: 0.5em 0px; padding: 0px 2.5em;"><li style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jjK_V8QXhvagLilHhIJdPVqepUMyWP5zXLpWnhpWoBCrHo1318rfhqeeMUMPC90t1g64B7ujVDIp6tQpbzCTOYhdKBxUfk5fbDjIfdvtBn4wq14qcXoGH9wAlSaoRqhx5UhvPVxn7fej/s1600/p-con-li.png); background-position: 15px 3px; background-repeat: no-repeat; list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px; position: relative;"> Save the Template <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTbjpNqsCyC3SO2MMy7bjG2I6FUnrUXtiJVmh4bOPaCcRB1fxGCps5zV2HWrZj3xxmc7hyaSoNQJWjHRiU8IS0OTF9XJiWKOCiyGhS5Ky5UhsX0giejvZhj4PaK-iNcT4sYp9BD1vtEXs/s1600/save+template.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; height: auto; margin: 0px; max-width: 590px; padding: 5px;" /></li></ul><span style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;">You are done..! If any problem persists please do comment.</span></div><div style="clear: both; margin: 0px; padding: 0px;"></div></div><div class="post-footer" style="margin: 0px; padding: 0px;"><div class="post-footer-line post-footer-line-1" style="margin: 0px; padding: 0px;"></div><div class="post-footer-line post-footer-line-2" style="margin: 0px; padding: 0px;"></div><div class="post-footer-line post-footer-line-3" style="margin: 0px; padding: 0px;"><span class="post-location" style="margin: 0px; padding: 0px;"></span></div></div></div><div class="comments" id="comments" style="clear: both; margin: 0px 0px 0px 20px; padding: 30px 0px 0px;"><b style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;"><span style="font-size: x-small; margin: 0px; padding: 0px;"><a href="http://allcoder.hiteshkatara.com/2013/04/add-page-peel-effect-with-jquery-css-to.html">Click the link</a></span></b><div id="backlinks-container" style="margin: 0px; padding: 0px;"><div id="Blog1_backlinks-container" style="margin: 0px; padding: 0px;"></div></div></div><div class="comments" id="comments" style="clear: both; margin: 0px 0px 0px 20px; padding: 30px 0px 0px;"><b style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;"><span style="font-size: x-small; margin: 0px; padding: 0px;"><a href="http://www.allblogtools.com/tricks-and-hacks/how-to-add-cool-page-peel-effect/">Click the link</a></span></b></div><div class="comments" id="comments" style="clear: both; margin: 0px 0px 0px 20px; padding: 30px 0px 0px;"><b style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;"><span style="font-size: x-small; margin: 0px; padding: 0px;">Click the link</span></b></div><div class="comments" id="comments" style="clear: both; margin: 0px 0px 0px 20px; padding: 30px 0px 0px;"><b style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;"><span style="font-size: x-small; margin: 0px; padding: 0px;">Click the link</span></b></div><div class="comments" id="comments" style="clear: both; margin: 0px 0px 0px 20px; padding: 30px 0px 0px;"><b style="color: #222222; font-family: sans-serif; font-size: 15px; line-height: 21px; margin: 0px; padding: 0px;"><span style="font-size: x-small; margin: 0px; padding: 0px;">Click the link</span></b></div></div><div class="inline-ad" style="background-color: white; color: #666666; font-family: Lora, Georgia, serif; font-size: 18px; line-height: 29px; margin: 0px; padding: 0px;"><ins id="aswift_0_expand" style="background-color: transparent; border: none; display: inline-table; height: 250px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 300px;"></ins></div></div></div>

Add Page Peel effect

Add Page Peel effect Step 1: Add jQuery plugin ( if your blog have a jquery plugin,ignore this step ) Copy the below code inside <head...

Add Page Peel effect

You can also receive Free Email Updates: