How To: Create a Peel Off Effect On Your Website/Blog

You came here because you found some websites sporting a peel off banner on the top right corner of the screen and when you hover your mouse over it, it peels off and displays a message lying beneath it. If you’ve ever wondered how you can do something similar in your website, then you have come to the right spot.

[adsense]

We’ll learn how to create a peel off effect which you can sport in you blog which will definitely lure visitors and is quite good in conveying messages than the notification bars (like Hello Bar). If you have doubts about what we are actually saying, take a look at the top right corner of this site.

[stextbox id=”info”]#1 Download the Required Files[/stextbox]

Download the required files from here. After downloading, extract them. Make sure that you have the following files:

  • large.swf
  • large.jpg
  • small.swf
  • small.jpg
  • peel.js

You need to upload this files to your site. For WordPress users it is recommended that you upload these files to wp-content/themes/your_current_theme/peel/ Okay, now lets go for the next step.

[stextbox id=”info”]#2 Editing peel.js[/stextbox]

You need to open peel.js and we should make the necessary changes to make it work properly. You are supposed to edit the following attribues:

  1. jaaspeel.ad_url – Your Target URL.
  2. jaaspeel.small_path – Path of small.swf
  3. jaaspeel.small_image – Path of small.jpg
  4. jaaspeel.big_path – Path of large.swf
  5. jaaspeel.big_image – Path of large.jpg
[stextbox id=”info”]#3 Editing the Images[/stextbox]
You need to edit the small.jpg and large.jpg images. The small.jpg image is the image that is displayed before peeling. The large.jpg is the image that is revealed after peeling. If you are good at image editing, you can go ahead create your own.
Otherwise go to Google and search for an image that would suit your needs. Make sure that the dimensions of the small.jpg image is 100 x 100 and that of the large.jpg is 500 x 500.
The flash files can be left as it is.
[stextbox id=”info”]#4 Uploading the Required Files[/stextbox]

You need to upload the files to your webhost through FTP or any other means. Make sure that the attributes that you gave in #2 matches with your upload folder.

[stextbox id=”info”]#5 Editing the Header[/stextbox]

After everything is set and done, you need to add a small piece of javascript to the header of your site,  after <title> before </head>.

 

Make sure that you edit the source URL of the peel.js to the correct one.

Now hit refresh and you could see the peel off effect working flawlessly on your site. This can be used to direct your users to your featured posts or important announcements, advertisements or just wish them (like we did). Your creativity is the limit.

Hope you liked this tutorial. If you have any doubts, do tell us through the comments and we will be happy to help you.