How to Create Custom Advertisement Blocks

How to Create Custom Advertisement Blocks

Contents

Overview
The following is an illustration of an XLEcom web page showing four Advertisement blocks, two are on the left side and two on the right side of the page.

The two Featured Product Advertisement blocks are created automatically by the program by selecting products from a drop-down list. The third and fourth Advertisement blocks are Custom Advertisement block displaying a Google AdSense Ads.

View a Live Website Demonstration
You can view a Live Website Demonstration here: Mal's Cart and Google AdSense Ads Demo
 


Featured Product and Text Advertisement Blocks
Both Featured Product and Text Advertisement Block are built into the program and are created automatically.

Featured Product Advertisement Blocks are created by selecting products from a drop-down list. A Text Advertisement Block is created by entering text into the supplied areas as shown in the two dialog box screen shots below. You can display a Featured Product and Text Advertisement Block on both the left and right side of your web pages.

For the Text Advertisement Block, if any of the three text elements contain an open or close angle bracket (<>), then it will automatically be assumed to be code instead of text, and therefore the automatic font formatting will not be applied to the code. Each of the three text elements are separated by a line break (<br>).

To access the Let or Right side Advertisement Blocks design utilities. Run the Site Setup routine.

 


Creating a Left or Right side Custom Google AdSense Advertisement Block
Below is an illustration of a Google AdSense advertisement. It was created using the following JavaScript code provided by Google. In order to get the Advertisement code you must first have a Google AdSense account. Next, you need create a Ad channel within your Google account in order to get the code. Your actual Ad code may will vary a little from the example code shown below. It really depends on the type of Ad you want to display.

120 x 240 Vertical Banner Ad

Google AdSense code

<script type="text/javascript"><!--
google_ad_client = "pub-4846252889647883";
/* 120x240, created 5/14/08 */
google_ad_slot = "5457590999";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The AdSense code provided by Google contains Comments, line breaks, and extra spaces. You first need to remove the comments and line breaks such that code will appear on one line. You may also need to remove some of the extra spaces within the code such that the code will fit within XLEcom Advertisement block's 256 characters limit.

Removing the Comments, line breaks, and extra spaces from the original Google AdSense code results in the following:

    <script type="text/javascript">google_ad_client="pub-4846252889647883";google_ad_slot="5457590999";google_ad_width=120;google_ad_height=240;</script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

To utilize the Google AdSense code within an XLEcom Advertisement block, copy and paste the code into the Custom Code Block area as shown in the images below. You can preview the Ad by pressing the Preview Layout button.

Adding the Code to the Left side Area
Activate the Site Setup - Left Frame Page / Area Dialog box and then press the Additional User Code button near the bottom right to bring up the Left Side Additional User Code Dialog box.

Left Side Additional User Code Dialog box

 

Adding the Code to the Right side Area


View a Live Website Demonstration
You can view a Live Website Demonstration here: Mal's Cart and Google AdSense Ads Demo

Creating a Left or Right side Custom Advertisement Block using an external JavaScript file (.js)
If you want to create a Custom Advertisement Block that contains more than 256 characters, then you need to place your Custom Advertisement Block code into an external JavaScript file (.js).

The procedure is simple as described below:

  1. Create a new ASCII text file using your favorite text editor.
  2. Enter in the following JavaScript statement: document.write(' ');
  3. Place your custom code between the single quotes in the document.write statement, i.e. document.write('your custom code');
  4. If your code contains any single quotes ('), then insert a back slash (\) before all the single quotes (') in the code.
    Caution: Do not insert a back slash (\) before the two single quotes (') which are part of the document.write(' '); statement.
  5. If your code contain a reference to an external file such as an image, then use the entire absolute path to the external file, i.e. http://xlecom.com/assets/images/xlecom-software-box.jpg
  6. Save the file as an ASCII text file using the JavaScript file extension .js, i.e. custom_ad1.js and place the file into your XLEcom's Assets/html folder.
  7. Place the following line of code containing the full http internet path to your JavaScript file into the Custom Code Block within the Left or Right side areas as shown in the dialog box images above.

    <script type="text/javascript" src="http://yourdomain.com/html/custom_ad1.js"></script>
     
  8. Before you Publish your web site, and within the Publish dialog box, check the box labeled "Copy all files from the Assets/html folder to the Publish folder". This will make the publish routine copy your JavaScript file into the Publish\html folder.
  9. That's it.

Note: To have the Custom Advertisement Block show up in the XLEcom page previews, first upload the JavaScript file to your website's html folder.

More Information
More information on creating Advertisement blocks can be found here: