How to Create a jQuery Peel Away Effect on Your Blogger Blog

Socialize It →

Tweet

12

Advertisements

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.

Peel Away Effect (DEMO) 

First, let’s talk about its appearance. Just like other Peel away widgets, it would also appear at the top right corner of your website. Whenever visitors would place their mouse on the top right corner of your website, it would display the hidden advertisement with jQuery peel away effect. Check out the following screenshot to learn how it works.

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/AVvXsEiIf2oMqQ1WZBvWMpLniv69QDhS3AuFJreb0QK-mDwoIq2T-hyXBvkO3aooxkLhePdNvsJIKHzejnZyhvNumhdy8F-fqAuw3SXSBOkDEEV056QVJiewRFP9S4vFCqGROKzU9Ok_WlvOYfs/s1600/DottedAdvertSmall.png","largeImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Lc8x7qE6454Dn0uMQpSrCt4b4uzdvgE9bkURt4WK6nUM20LgWMovBmMta3LwuMXhvKzXotY7naeR5OqHHGl19aN2x9zTRpDWZZN2kiuIScaFJemBKebIOBW6V9tX-XvLS58S1eBpcsA/s1600/Temppeel.png","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://www.templateism.com","pagePeelActivateEvent":"hover"};
/* ]]> */

</script>

Customization:

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

• Replace http://www.templateism.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. 

From The Editor’s Desk:

To be honest, this is the most professional Peel away Effect that we have ever seen on the web till date. All the credits go to the MBL development team that always comes up with extraordinary stuff. That’s all we have for tonight. Do not forget to leave your comments and suggestions below. Take care till then, Peace, Blessings and Happy Peeling.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).