How to create a peel ad in a WordPress blog

Posted in Development, Wordpress by Alex | Tags: page peel, peel ad, wordpress peel
WP Greet Box icon
Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

A peel ad is often a great way to advertise a chosen product. It doesn’t matter if it’s your own product or a affiliate product. This type of ad is one of the most successful when it comes to get the users attention. The installation is fairly simple and it can be set up in just 5 min.

page-peel

If you are the lazy type just like me, go ahead and download this plugin, it does the same thing. If you would like to find out how to code your peel ad here is how to do it:

Download the source files

In order for the ad to work you will need the peel files, that you need to upload to your web server. The best place to upload the peel file is wp-content/themes/your_current_theme/.

Edit the javascript file

Now we need to edit the peel.js javascript file. Open it in your favourite text editor and change the following files:

1. jaaspeel.ad_url – URL you intend to point the ad.
2. jaaspeel.small_path – Path to small.swf
3. jaaspeel.small_image – Path to small.jpg
4. jaaspeel.big_path – Path to large.swf
5. jaaspeel.big_image – Path to large.jpg

Here you have a actual example of how it can be done.

jaaspeel.ad_url = escape('http://www.designstrike.net'); 
jaaspeel.small_path = 'http://www.designstrike.net/wp-content/themes/simplified/peel/small.swf'; 
jaaspeel.small_image = escape('http://www.designstrike.net/wp-content/themes/simplified/peel/small.jpg'); 
jaaspeel.big_path = 'http://www.designstrike.net/wp-content/themes/simplified/peel/large.swf'; 
jaaspeel.big_image = escape('http://www.designstrike.net/wp-content/themes/simplified/peel/large.jpg');

What files you need to edit

The small image file is the image that the users sees when no hover is applied. You can change this according to your background.

The large image file is the actual ad image that the user sees when it hovers the ad and the peel is released. This can be edited accordingly.

Upload

Upload the entire peel folder inside your theme file. Be shure to specify the paths correctly.

Code insertion inside your theme

Ok, we need to add a little javascript call in your head section of the theme. To do this navigate to your header.php file and insert the following code before the ending head tag.

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

And there you go, instant peel ads without the help of any plugin.

You may be interested in these also:

  • No Related Post

One Comment to “How to create a peel ad in a WordPress blog”

  • I would like to incorporate this to my website. Problem is finding the design material (banners) for the site.

    Do you know any clean/simple peel banners for free or something cheap?

    Thanks
    WP Themes´s last blog ..WooThemes Themes Giveway Contest from WPThemes.com My ComLuv Profile

Post comment

CommentLuv Enabled