How to Add JQuery Page Peel Away Effect To Blogger Blog

One of the coolest feature to have in your blog is page peel effect or page flip effect.To add this peel away effect to blogger blog, that is when you hover over the peal of area you will see a cool page peel off like effect. Adding this effect in blog is easy. You can also add this widget in your website. This effect is done by using JQuery language which is pretty amazing. Too see demo click on the below link

DEMO LINK

First let talks about the appearance. Just like other page peel effect widget it will also appear on the top right corner of your blog. Whenever visitor will move mouse towards the top right corner it will display the hidden  advertisement with amazing JQuery peel effect. Follow the below steps to know how to add this amazing page peel effect to blogger.

How to Add JQuery Page Peel Away Effect To Blogger Blog

1. Login to Blogger.com

2. Go to "Template"

3. Click on "Edit HTML"

4. Search for ]]></b:skin> tag by pressing Ctrl+F
5. Just above ]]></b:skin> tag paste the following Stylesheet CSS Coding

/*=======================================================
Makesomesense - Technology, Blogging, Tutorials, Gaming, SEO, Wordpress   =======================================================*/

.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; }

6. Now after adding CSS code search for </head> tag by pressing Ctrl+F
7. And below it paste the following JavaScript code. (Note: You can also add below code in "HTML/Javascript" section)

<!--Makesomesense - Technology, Blogging, Tutorials, Gaming, SEO, Wordpress-->

<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/AVvXsEjhdQrB09CMI5LqUR-g8SJEXeeWgXAEaHMF_14A1SdiU6MA0xDBQK0sOHjUTXPzD3_TjfztHxC4K1nnYG5oUXs4m19-oN7gI_e-kzEVbc61iyno3P76uRb_EhoAcMA-cn7vXlNZFUVD_RM/s1600/DottedAdvertSmall.png","largeImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWA22sMtrzoyZh7b0F3-kk0KdtwfXPs7ztbn0V2fTfQv3IgDvtvmkcg6EsaNU7VuD6VhtOhhGr3NTCiDq2JijLY3loQ8eQpVylaMy-KMqR8YVqVMQgfQAL5W3dHf0RJSsFt91NQEc_8c/s1600/Temppeel.png","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://www.makesomesense.com","pagePeelActivateEvent":"hover"};
/* ]]> */

</script>

Customization: If you want to show your advertisement then replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWA22sMtrzoyZh7b0F3-kk0KdtwfXPs7ztbn0V2fTfQv3IgDvtvmkcg6EsaNU7VuD6VhtOhhGr3NTCiDq2JijLY3loQ8eQpVylaMy-KMqR8YVqVMQgfQAL5W3dHf0RJSsFt91NQEc_8c/s1600/Temppeel.png with your image URL. Make your size of image should be 500px in height and 500px in width.

Replace http://www.makesomesense.com with your advertisement URL.Kindly not it is not necessary to always add URL because it also we can use it for notification purpose.

8. Save template.

Work Done

Happy Blogging!