Rotating Ads

If you’re interested in ways to monetize your blog this video is for you.
Using the OpenHook plugin, you can put rotating ads pretty much anywhere in your
Thesis site.

HTML framework used in the video is Page, not Full-width. (what’s this?)

The video goes through 2 examples:

• Example 1: Inserting a block of three 125×125 ads.
• Example 2: Inserting a block of two 200×125 ads

How do the two examples differ?

They don’t. I followed the same steps to insert both ad blocks. I went through
the same process twice just to make it clear.

Example 1

<!--Rotating Orange 125x125 ads-->
<div class="r_adblock125">
<?php
/*Rotating Ad 1*/
 $ads = array(array("title"=>"this is ad 1",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad1.gif",
 "url"  =>"http://test2.thesis101.com",),

/*Rotating Ad 2*/
 array("title"=>"this is ad 2",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad2.gif",
 "url"  =>"http://test2.thesis101.com",),

/*Rotating Ad 3*/
 array("title"=>"this is ad 3",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad3.gif",
 "url"  =>"http://test2.thesis101.com",),

/*Rotating Ad 4*/
 array("title"=>"this is ad 4",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad4.gif",
 "url"  =>"http://test2.thesis101.com",),

/*Rotating Ad 5*/
 array("title"=>"this is ad 5",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad5.gif",
 "url"  =>"http://test2.thesis101.com",),

/*Rotating Ad 6*/
 array("title"=>"this is ad 6",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad6.gif",
 "url"  =>"http://test2.thesis101.com",)
				 );
 shuffle($ads);
 $ads = array($ads[0],$ads[1],$ads[2]);

 foreach($ads as $ad){
   ?>
     <a href="<?=$ad["url"]?>"><img src="<?=$ad["img"]?>" alt="<?=$ad["title"]?>" border="0"/></a>
   <?
 }?>
</div>

CSS:

/* -------------- :[  ROTATING ADS 125x125 ]: --------------*/

.custom div.r_adblock125 img {
	padding: 1px;
	border:2px solid #797979;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
.custom div.r_adblock125 a:hover img {
	padding: 1px;
	border:2px solid #AB4119;
}
/*.custom .cenx {
	text-align: center;
}*/

Example 2

<!--Rotating 200x125 ads-->
<div class="r_adblock200">
<?php

/*Rotating Ad 1*/
 $ads = array(array("title"=>"this is ad 1",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad-green1.gif",
 "url"  =>"http://test2.thesis101.com",),

/*Rotating Ad 2*/
 array("title"=>"this is ad 2",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad-green2.gif",
 "url"  =>"http://test2.thesis101.com",),

/*Rotating Ad 3*/
 array("title"=>"this is ad 3",
 "img"  =>"http://test2.thesis101.com/wp-content/themes/thesis_151/custom/images/ad-green3.gif",
 "url"  =>"http://test2.thesis101.com",),

				 );
 shuffle($ads);
 $ads = array($ads[0],$ads[1]);

 foreach($ads as $ad){
   ?>
     <a href="<?=$ad["url"]?>"><img src="<?=$ad["img"]?>" alt="<?=$ad["title"]?>" border="0"/></a>
   <?
 }?>
</div>

CSS:

/* -------------- :[ ROTATING ADS 200x125  ]: --------------*/
.custom .r_adblock200 img {
	margin-bottom: 10px;
}
.custom div.r_adblock200 img {
	padding: 1px;
	border:2px solid #797979;
}
.custom div.r_adblock200 a:hover img {
	padding: 1px;
	border:2px solid #AB4119;
}
.custom .cenx {
	text-align: center;
}

View Demo

Pretty cool, huh? If you found this tutorial useful, consider swinging by Chris’s blog to say thanks—he is the one that put it together.

Check out his demo page.
(3)  Loading ...

Tagged as: 125×125, 200×125, ads, hooks, monetize, multimediabox, OpenHook, page-framework, rotating, sidebar, v1.5