Query Peel Away Effect on Your Blogger Blog

If anyone is guessing, how those Bloggers and Webmasters are able to create that little peel away effect on the top right corner of their blog then we assume that it is able to grasp your attention. The main intention of using this plugin is to make your visitor curious about a certain product because, your visitors will keep on guessing what will come out next time when they peel off. This is certainly one of the most prominent ways of diverting attention of your visitors towards a certain product or page. For Affiliate marketers, webmasters and online money makers it is a piece of gold if it is utilized purposely. Therefore, today in this article, we will learn How to Create a Peel Away Effect on Your Blogger Blog.

                                DEMO

How to Create a Peel Away Effect on Blogger:

Now, after going through the online demo let’s get on with the tutorial. Consider the following instructions and apply them correctly. Remember: The same instructions would also work on WordPress or any other platform.

Go to Blogger.com >> Template >> Edit HTML >> Proceed. Now Within the Template search for the ]]></b:skin> tag and just above it paste the Following StyleSheet CSS coding. There is no need to do any customization in the StyleSheet. However, if it is necessary do it accordingly.

/*=======================================================
   MBL Page Peel PRO Effect For Blogger
  =======================================================*/

.admin-bar #PagePeel{top:27px;}

/*Extra 20px height and width to allow for shadow and movement*/
#PagePeel{
    height:120px;
    overflow:hidden;
    position:absolute;
    right:0;
    top:0;
    width:120px;
    z-index:9999;
}
 
#PagePeel svg{
    overflow: hidden;
    position: absolute !important;
    right: 0;
    top: 0;
}

#PagePeel .pointCursor:hover{cursor:pointer;}

#mycontent { position:relative; margin-left:30px; }

Now after adding the CSS coding search for the </head> tag and just below it Paste the Following JavaScript coding. However, anyone can also paste it in the Html/JavaScript Area according to his desire needs.

<!--MBL Page Peel PRO Effect For Blogger-->

<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziazIzXzlhMlhtWlU'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziMmk4anpFWnRPWHc'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNzidExmT1JpWV9xNmc'></script>

<div id="mycontent">Peel Away Effect By <a href="http://www.mybloggerlab.com">MyBloggerLab.com</a></div>
<script type='text/javascript'>
/* <![CDATA[ */
var PagePeelProParams = {"smallImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2g-LjLWqiz302Htd7AQiFCsTuN7djACf1Did5_CP1FakDsHRwzxRo0NJjTfS3PWAtA9E2abTF1e_sfXb9bP6jsddZGq76ZUZQBCKPk_FGpAwV588WHMRA8Y3hLtzMGtfvcJCwBC5Blx8/s1600/DottedAdvertSmall.png","largeImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wCGjMFTdy964kn9wfbvx-K-dJ-b7SEiMj451CE3_-C4avcuquU4KcczpXuruFcBcSiaaEvvy_eCg0BQULTM9Nb85xui_e6DGFn343Z940YUsUGfWRz3i65WoHADGJFMMAQNCHMord-E/s1600/Temppeel.png","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://m4mohandis.blogspot.com/","pagePeelActivateEvent":"hover"};
/* ]]> */

</script>

• To show your Advertisement on Peel off, just replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wCGjMFTdy964kn9wfbvx-K-dJ-b7SEiMj451CE3_-C4avcuquU4KcczpXuruFcBcSiaaEvvy_eCg0BQULTM9Nb85xui_e6DGFn343Z940YUsUGfWRz3i65WoHADGJFMMAQNCHMord-E/s1600/Temppeel.png with your Image URL. Make sure the Image size is 500px in Width and 500px in height.

• Replace http://m4mohandis.blogspot.com/ with your advertisement URL. However, it is not necessary that you always add a URL because we can also use it for notification purpose.

All Done: After modifying the widget according to your desire needs, just save the template by pressing “Save Template” Button. That is it your site is ready with an incredible Peel away effect.