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.
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:
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:
- jaaspeel.ad_url – Your Target URL.
- jaaspeel.small_path – Path of small.swf
- jaaspeel.small_image – Path of small.jpg
- jaaspeel.big_path – Path of large.swf
- jaaspeel.big_image – Path of large.jpg
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]
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.