Wednesday, June 26, 2013

How to add a rotating advertising banner (3 easy steps)

My client wanted to show a top banner with an image and a link.   However, instead of just 1 image, he wanted a 2nd advertiser image to appear 50 percent of the time also.

I immediately thought a flash-based solution, but then realized it wouldn't work on iPhones.

So, I created a simple BLogger solutions using 2 HTML widgets.

on the 1st widget, create the actually banner code to display the images.    Note, the images are both hidden using the div attributes:

Step1:

<div id="tom_hide" style="display: none"; align="center"><a href="http://www.blessyourheart.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtSzOku-S7ZQRH8vqsnBZhEwgBj1v4e694L1mjY2S51mQY4pJfRzvhilsDgoaf1Dnw4ztGbtPG05n9UpEaSb005AthydTNlHSMCGU_lRfovOwdPNoDNxi4O-dwi0nvyQJt4FD-YNpu6I-/s1600/DFWSportatorium+-+Top+Banner+-+HMS.jpg"/></a></div><div id="tom_hide2" style="display: none"; align="center"><a href="http://www.vandergriffhonda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Ldo1cm7EkNVe3l3BO-VGEUDlaD-M0lzZVj083B_fGB0iXRK3PEvOe4r-Hys4F_5URGg-FaGnZ8juAH9-4kGnV8NqfhLZEmQETqlb7k0oRD_1tYCcndwZ7oAdpCwGcuXqyk0TmrQAHyt3/s1600/DFWSportatorium+-+Top+Banner+-+Vandy.jpg" /></a></div>

Then, you just need to create another HTML widget under it, and this time we will create javascript code that will select (show) either the 1st or the 2nd div tag:

Step 2:

<script type="text/javascript">function Randoms(){  var randomnumber = Math.floor( Math.random()*10); 
if (randomnumber < 5) {
document.getElementById('tom_hide').style.display = "none";    document.getElementById('tom_hide2').style.display = "none";  
document.getElementById('tom_hide').style.display = "block"; 
else { 
   document.getElementById('tom_hide').style.display = "none";   
document.getElementById('tom_hide2').style.display = "none";         document.getElementById('tom_hide2').style.display = "block";
}

}
</script>

Step 3:

Now, the last step is to call the javascript function when the webpage first loads.   You just need to go and edit the HTML template (back it up first) and add onload="Randoms()" function to the body.   Here is the example:

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='Randoms();'>


Another method is to use Jquery with picture slider (or fader, etc).