Affiliate Handbook

Find out the secrets to becoming a Super Affiliate!

This area demonstrates different pre-styled text effects that can easily be used.

Make sure the text is wrapped in a paragraph tag so the margins are applied correctly.

To make a box like this, wrap your text in a div with the class "sidebarlt".

To make a box like this, wrap your text in a div with the class "sidebardk".

The below AdSense ad is pre-styled for 160x600 or 120x600 AdSense skyscraper ads.

Free Dreamweaver Template for Google AdSense

AdSensation is a free Dreamweaver template for easy implementation of Google AdSense into a website.

Use this template - Make more money!

Our AdSensation Dreamweaver template is designed for optimal AdSense ad block placement and includes a variety of pre-styled ad containers.

By simply wrapping your AdSense code in the proper CSS tag, the code is properly positioned for maximum visibility and profitability.

Easily include AdSense ads in this web template

We've created a number of CSS styles that make inserting your AdSense code very simple. Here are the examples of the code blocks and ad sizes that are included with this template.

728x90 Leaderboard

This ad is displayed at the top of this page between the header and content sections. The CSS tag that styles the block is called 'adblock728' and includes a background image and proper padding around the ad.

Banner 468x60

Banner

This ad is styled with proper margins to center it in the content area.

Square 250x250Square 250x250

This ad has two different styles depending on whether you want it positioned at the left margin or the right margin.

For a right margin positioning, apply the 'adblock250x250right' class to your AdSense code.

For a left margin positions, apply the 'adblock250x250left' class to your code.

This ad is shown at the top of the content section of this page using a live AdSense ad.

Wide Skyscraper 160x600 and Skyscraper 120x600

The 160x600 ad is displayed with a live AdSense ad in the left sidebar of this page. The surrounding div has the 'adblock160x600' class applied and the class also used center positioning so the Skyscraper 120x600 size ad can also be used in the same container.

To create an ad for the left sidebar that has no background or border like the ad shown to the left, use the color F3F3F3 for the background and border in your AdSense ad creation.

Using other AdSense ad sizes

If you want to use other sizes of AdSense blocks other than those included with the template, simply create a new CSS class or change an existing class to work with your ad size.

For example, if you want to use the Small Square 200x200 ad instead of the 250x250 ad, simply change the width and height of the 'adblock250x250right' (or left) to 200 pixels. This will change the dimensions for the new ad size.

Examples of pre-styled template features (this uses the H2 tag)

This is a text link to nowhere - this just shows the default link color and bold font used for links in the content section of the page

Image Floated Left


An image with the assigned class "fltlft" will be aligned with the left edge of the content div, with a 15 pixel right margin and a 10 pixel bottom margin.

Image Floated Right

An image with the assigned class "fltrt" will align with the right margin of the content with a left margin of 15 pixels and a bottom margin of 10 pixels.

 

An Unordered List

Unordered lists are styled with a 5 pixel bottom margin.

  • This is a list item
  • This is another list item
  • This is the third list item

This is a Blockquote.

The blockquote CSS defines the background color, borders and the left and right margins, and the left and right padding inside the box. The #mainContent p selector controls the top and bottom padding around the paragraphs inside the blockquote tag.

The Logo and Header

The logo is simply a .gif image with a transparent background to allow the header background to show through. To change the logo image, simply find the #logo entry in the CSS file and change the background image to your logo. The #logo id also controls the navigation links on the upper right side of the header. The included Fireworks file makes it easy to create a custom logo to insert into this template.

If you don't have Adobe Fireworks, you can download a free trial here.

The Menu Navigation

The navigation is a pure CSS navigation menu. To add a menu item to the list, simply find the code towards the top of the code view that looks like this:

<li><a href="#1">Make Money Online!</a></li>
<li><a href="#2">Free Template!</a></li>
<li><a href="#3">AdSense-ready!</a></li>
<li><a href="#4">All pre-styled!</a></li>
<li><a href="#5">Just add content and go!</a></li>
<li><a href="#5">Download template here</a></li>

To add menu items, copy the last line including the <li> and </li> tags and paste directly beneath it. You can edit the text in code view or switch to design view and simply type in your new link on the menu itself.

To edit the menu items already there, simply highlight the item and type in new anchor text and assign new links.

Editable Metatags and Head Section

The template allows for editing of the Title, Description and Keywords tags for each page plus another editable area in the Head for inserting scripts and other Head content.

Editable Template Areas Included

The template has editable areas included for the content section and the sidebar section below the navigation. If you wish to include the same content on every page on the sidebar, simply delete the editable region called "Sidebar Content".

What's the Catch?

We supply our templates and graphic files free of charge, with the only requirement being the small link at the bottom of the template be left in place and not altered in any way. We've styled it very small and unobtrusive, so that's a pretty minor requirement considering the time we spend creating these templates AND it will keep us developing more templates in the future!

Thanks for trying out our template and if you run into any code or browser issues, let us know. We test our templates in IE 6, IE 7, Firefox 2, Netscape 9 and Opera 9, so if there's any issues on Safari we'd be interested to know.

To Extend this Template

Here are some suggestions for creating the ultimate website from this template.

  • Database integration - to easily create a website powered by a database, check out DataAssist or Essential Suite.
  • User Registration and User Profile management - Security Assist
  • Build a CMS to update your site via your browser, use DataAssist and iRite or get the Dynamic Suite
  • To easily integrate Google map either from an address you type in or from a database, try Pro Maps for Google
  • To integrate a shopping cart system, check out: eCart.
  • To easily validate form input and cut down on spam, take a look at Validation Toolkit
  • For other excellent Dreamweaver extensions that are too numerous to mention, check out this site, this one and this one too. And don't forget about our sweet extension collection on JustDreamweaver.com.

 


Free Dreamweaver Template from JustDreamweaver.com