How to Create A Peel Away Effect On Your Website/ Blog

by 6 years ago

create peel away effect

How to create peel away effect on website or blog? It is one of the most asked question. Webmasters or bloggers always wonders about the tricks used to create peel away effect. Peel away effect is most effective way for getting attention of your visitors.

Peel away effect makes visitors curious to peel it off and see what’s in. This curious nature of visitors turns into money for you. The best use of peel away effect on websites or blogs is to display advertisements. Peel away effect is positively successful way to market your products or bring mere attention to area of your website you want focus.

Create Peel Away Effect


Here I am going discuss a complete guide for creating Peel Away Effect on your website or blog. It is a easy and simple trick. By following these given steps you can create make it effectively.

Note:

WordPress users can direct use this  plugin to create peel away effect on their website or blog. Other then WordPress users can do it manually by following steps:

Step1. Download these required files

Download peel.zip .

Or ww.itcse.com  Download.

The peel folder should contain the following file:

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

Step 2. Edit peel.js

Now open peel.js in your any text editor or script editor and make the following  changes to it:

jaaspeel.ad_url – URL you intend to point to.
jaaspeel.small_path – Path to small.swf
jaaspeel.small_image – Path to small.jpg
jaaspeel.big_path – Path to large.swf
jaaspeel.big_image – Path to large.jpg

Let me make it easy for you, Suppose a your domain name is itcse.com and you want to create peel away effect on it that should be pointing to google.com. Then you should modify above code to look like this.


jaaspeel.ad_url = escape('http://www.google.com');
jaaspeel.small_path='http://www.itcse.com/wp-content/themes/itcsedotcom/peel/small.swf';
jaaspeel.small_image=escape('http://www.itcse.com/wp-content/themes/itcsedotcom/peel/small.jpg');
jaaspeel.big_path='http://www.itcse.com/wp-content/themes/itcsedotcom/peel/large.swf';
jaaspeel.big_image=scape('http://www.itcse.com/wp-content/themes/itcsedotcom/peel/large.jpg');


Make sure the path of each file is correct while editing the URLs.

Step 3. Change Images (anything you wish)

  • small.jpg : Replace it with your image that match with your background. It is a small background image that visitor can see before going to actual content.
  • large.jpg : Replace it with your image that visitor can see after pointing to “peel away page”.

No need to edit small.swf and large.swf .

Step 4. Upload files

Now upload them in your server directory, where ever you want. WordPress users can upload it on wp-content/themes/your_current_theme/.

Make sure the path of each file should be correct while editing the URLs. That you have edited in step 2.

Step 5. Adding Javascript in header

Now its last step, Add the following Javascript after <title> before </head>.

<script src=”<strong>http://www.domain.com/peel.js</strong>” type=”text/javascript”>
</script>

Here you done, Now refresh your website page or blog.

Also read: WordPress Tips: Separate Comments and Trackbacks

If you like it or have any other trick to create peel away effect, feel free to leave a comment.

Comments

Load More