Create A Peel Away Effect On Your Blog / Website
If you are wondering how some webmasters or bloggers create this little peel away effect on the top right corner of their website, that means it is successfully getting your attention and we assume that’ll make visitors curiously wanting to peel it off and see what’s in store.
This is certainly a very effective way to market products and bring more attention to pages you want visitors to focus. For webmasters cum online money makers, this can be a new interesting approach you can propose to advertisers. Creating a peel away effect on your website / blog is fairly simple. Full guide after jump.
Note: For wordpress users, you can skip doing this manually. This plugin will do the trick. Thanks Mohd Ismail.
1. Download required files
Download peel.zip (Alternative – Download), extract it. Your peel/ folder should contain these following files:
- large.swf
- large.jpg
- small.swf
- small.jpg
- peel.js
Plan where you should upload this folder at later stage. For WordPress users, you are suggested to upload peel/ inside wp-content/themes/your_current_theme/. Fow now, let’s fire up your favorite text and image editor.
2. Edit peel.js
Open peel.js with your favorite text editor. Change these following settings:
- 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
Here’s an example, assuming the domain is hongkiat.com and I’m pointing it to google.com.
jaaspeel.ad_url = escape('http://www.google.com');
jaaspeel.small_path = 'http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/small.swf';
jaaspeel.small_image = escape('http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/small.jpg');
jaaspeel.big_path = 'http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/large.swf';
jaaspeel.big_image = escape('http://www.hongkiat.com/wp-content/themes/hongkiatdotcom/peel/large.jpg');
3. Edit the images
- small.jpg – The small background visitors see before content behind gets revealed. Edit if you’d like to match it with your background.
- large.jpg – What visitors will see after pointing their mouse to ‘peel the page off’. This is the image you’ll want to edit.
Both flash files, small.swf and large.swf can be left un-touch.
4. Upload files
Upload the entire peel/ folder to via FTP your web account. Make sure it matches with the settings you’ve entered earlier in Step 2.
5. Add Javascript in header
Add the following Javascript after <title> before </head>.
<script src="http://www.domain.com/peel.js" type="text/javascript"></script>
You are done! Refresh the website and you should notice a peel away effect on the top right corner of your site.
Share!
Enjoy the article so far? Recommend it to your friends and peers.
Subscribe! (free)
Be the first to our articles and get latest updates on freebies.
Advertisement
