In this video tutorial we demonstrate how to incorporate Google Adsense into DotNetNuke websites.

In particular, the aim was to build a DotNetNuke website which would allow an administrator with little or no experience of DotNetNuke to:

• Easily choose what type of Adsense ad they wish to display on the page, for example a square ad or banner ad
• Easily choose the location on the page for the Adsense ad
• and all of the Adsense ads need to blend within the text content of the page

Incorporating Google Adsense into DotNetNuke

Previous documented methods for using Adsense with DotNetNuke involved using a Google Adsense module or placing the Google Adsense code directly within a Text / HTML module. Both of these methods however are not easy to set up for a beginner DotNetNuke administrator. It is also not easy to blend Adsense in with the text content of the page using these methods, which is essential for achieving a good click through rate and earnings from Adsense.

So after some experimentation, I found an easy way to incorporate Google Adsense into the page while also making it easy for an administrator to choose which Google Adsense ads they wish to display. This is all done using CSS.

DotNetNuke Tutorial

In these 4 video tutorials (33 mins) we walk you through, step by step, how to integrate Google Adsense with DotNetNuke skins. We demonstrate how to incorporate Adsense into the Free Simple Red Leaf CSS skin. You can see an example of the Adsense skin in action by watching the introduction video below. The code is available for download with the videos.

Introduction Video

View video 1 for an introduction to Google Adsense and DotNetNuke (4.4MB)

The videos cover:

Video 1 - Introduction and demonstration

• Introduction to incorporating Google Adsense with DotNetNuke
• Outline of tasks:
• Easily choose what type of Adsense ad to display on the page, for example a square ad or banner ad
• Choose the location on the page for the adsense ad
• All adsense ads need to blend in with the text content of the page
• Example layouts to create

Time Length: 5min 8secs

Video 2 - Skin setup and Google Adsense setup

• Downloading the Simple Red Leaf Skin, setting up and opening in Visual Web Developer Express
• Logging into Google adsense and creating the adsense code
• Creating the first adsense skin with the Google banner ad above the main content
• Viewing the adsense skin and introduction to the Google Adsense left square layout

Time Length: 8min 51secs

Video 3 - Adding Adsense square ads and blending with the text

• Creating a Google Square Left Adsense Container, where the text wraps around the Google ad
• Adding the clear class
• Viewing the Google Adsense left container
• Further explanation of the clear class and a demo view of a page without the clear class
• Creating the Google Square Right Adsense Container

Time Length: 9min 52secs

Video 4 - Adsense coloured containers and banner ads

• Viewing the adsense right container
• Creating the Google Square Left Adsense Coloured background Container
• Viewing the Google Square Left Adsense Coloured background Container
• Creating the Google banner ad in the middle of the text content
• Viewing the Google banners ad in the middle of the text content
• Conclusion 

Resources: http://www.dnncreative.com/tabid/272/Default.aspx