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

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.



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

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

Comment With:
OR
Choose Wisely!

9 comments

January 21, 2013 at 12:32 PM

Great one.

January 21, 2013 at 5:49 PM

Great brother, awsome peel effect i never seen before !

www.pokharatech.com

January 21, 2013 at 8:23 PM

great Bro, can i use this effect on my blog. for affiliate program. please give me suggestion.


Regards
Rahul Kashyap
Blog: SDMMovies.com

January 21, 2013 at 9:22 PM

Awesome the bounce effect is cool :D

LDM
January 21, 2013 at 10:51 PM

Awesome.

January 22, 2013 at 12:38 AM

now thats what i was talking about!!! Awesome post syed!! :D

January 22, 2013 at 8:04 AM

Спасибо))

January 24, 2013 at 11:12 PM

wow!

February 18, 2013 at 7:38 AM

wow great! nice job!

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.