Random Ad Banners Widget For Blogger

Random-Ad-Banner-Widget In most blogs which are selling ad spots you often have seen random Ad banners appearing when the page is refreshed. Ever wondered how to show random Ad Banners in Blogger? In today's tutorial we will learn how to create a Random Banner Widget for blogger which will show random Ad banners when a visitor visits a new page on your blog. Using this widget you can display as many Ad banners on a Sponsor Area as you want!
This widget is exactly similar to our previous 125 by 125 AD Banner Widget and in fact it is the most awaited one and have been requested several times by our readers. Just last night I succeeded in creating a simple Java script that uses Array of images and thus displays random images on Page refresh. 

Lets have a demo of the widget before jumping to the tutorial. Note:- Refresh the page to see new Ad banners.


Live Demo


How To Add Random Ad Banner Widget To Your Blogs?

Simply follow these steps,
  1. Go To Blogger > Design > Page Elements
  2. Choose HTML/JavaScript Widget
  3. And Paste the following code inside it,
<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center>
<!--  BANNER#1  -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!--  BANNER#2  -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
</tr>
<tr>
<td><center>
<!--  BANNER#3  -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!--  BANNER#4  -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</td></center>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="file:///C:/Documents%20and%20Settings/Mohammad/Desktop/ADVERTISE-HERE.gif" /></a></center></td>
      </tr>
    </tbody></table>
</div>

MAKE THE FOLLOWING CHANGES:-
1.  Replace URL OF ADVERTISER with the website link of the advertiser
2.  Replace URL OF BANNER’S IMAGE-1  and URL OF BANNER’S IMAGE-2 with the Image links of the Advertiser’s banners
3.  Replace AD DESCRIPTION with some information related to the Ad. The description appears on mouse hover.
4.  If you want to increase the distance between the ad blocks then edit width="265"
Now after making the necessary customization view your blog to see a beautiful 125 by 125 Banner widget that will change Banners on every different page.

Download Animated AD Banners

To ad spice to the widget may be you will prefer some of our previously designed animated banners -> Animated 125 by 125 AD Banners
Do let me know how did you find this new and useful widget. Take care! :D

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

61 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanx mustafa...very nice post. Im thinking to use it in my website

    ReplyDelete
  2. I'm one of those in your post here http://www.mybloggertricks.com/2009/09/125-by-125-ad-banner-widget-for.html who requested about random image show ads.

    this is good.. I hate messing the "Edit html"
    I will try this later in my blog http://zeegi-comix.blogspot.com/
    I will try experimenting it if I can change the width and height or maybe make it a marquee style

    ReplyDelete
  3. @Rafay

    Dear the images indeed are 8 in numbers but if you upload them all at blogger then it will not effect the loading that badly.

    @khalid @simplycodes @pc games

    Thank you all for liking it! :>

    @Zeegi

    Yes dear I hope I fulfilled my promise :p

    ReplyDelete
  4. wow...its cool
    why you aren't make like meta tag generator my friend...;))
    nice nice...

    ReplyDelete
  5. I have a problem with this trick.. sometime when i refresh the pages the img dont show and it says undefined.. did you encounter that problem

    ReplyDelete
  6. Great......this is the one i m looking for.....its look great on my blog..........
    http://topblogger1.blogspot.com/

    ReplyDelete
  7. @zeegi

    Which host are you using to store your images. Make sure you use blogger only. To know how to save images in blogger and get Direct Image Links read this post

    @bharath
    Congrats! :D

    ReplyDelete
  8. bro dun laugh at ma quest... m actually new in business... so plz assist me...
    How can I post to my blog?

    ReplyDelete
  9. hi,
    I am looking for this kind of post in the web,finally find that..I will try this..

    ReplyDelete
  10. hi all....
    i m the 200th follower to follow this blog... :)
    hurraayyyy...

    Three cheers for this blog...
    Hip Hip Hurray
    Hip Hip Hurray
    Hip Hip Hurrayyyyyy

    ReplyDelete
  11. hey Mohammad ^^ i realy need your help...idk what did i do some mounths ago with my background. I entered on a site and i think i copied a url code of a pic and i put it (i guess) in a Html Widget on my blog. That was ok and beauty.But now,the image has expired from PhotoBucket.

    Im trying to use the other metod with Url in "Edit Html" like:



    background-image: url(enter your url here);


    but doesnt work! :( i need to delete that widget but i have no idea where it is !

    Can u help me? i can share u my blog's platform html...

    P.S. my blog is: www.lucruri-spontane.blogspot.com


    Your still number 1# fan,Mary :-)

    ReplyDelete
  12. nevermind Moh! i did it myself :D!!! Ty for read anyway :D !

    yyaabadabaduuu xD


    xoxo,mary (•ิ_•ิ/)

    ReplyDelete
  13. Assalamu Alaikum,

    Thank you very much Mustapha Brother. I'm going to use this code to my blog www.productivehobbies.blogspot.com ; but yet I do not know how to find the advertisers who will pay me $10 for placing their ads in my sidebar widget!

    Thanks.
    Hope you reply.
    Allah Hafez.

    ReplyDelete
  14. before clicking on these adds i want all people to rea the link below

    http://www.buildfreedom.com/tl/tl12.shtml


    the link is about how to achieve emotional control

    some people use emotional out bursts in order to gain maxinmum advantage.

    why our respected blogger said it is the only income he rely on his my pocket money??


    be profesional mustafa if visiters are using ur blog it is ur right to request them, why using emotional words????


    anyway best of best


    regards fahad sarwar :D

    ReplyDelete
  15. sorry i mean best of luck :D

    ReplyDelete
  16. sorry mustafa

    fahad sarwar

    ReplyDelete
  17. salam..
    menarik ni
    bolehlah mulakan
    meniaga iklan sendiri
    di blog erk?TQVM

    ReplyDelete
  18. happy idul fitri
    taqobalallahu mina wa minkum

    ReplyDelete
  19. Well, a very nice tutorial.

    But can we implement the same if we want to show just one banner.

    ReplyDelete
  20. Where do I exactly copy and paste the code? I tried it on my blog and it messed up the template. :(

    ReplyDelete
  21. Good post, thank you! Going to add this to our blog!

    ReplyDelete
  22. I love this article and it is so fabulous and I am gonna save it. how can i get a copy of this theme? – Thanks for sharing article.

    ReplyDelete
  23. Aw, this was a really quality post. In theory I'd like to write like this too - taking time and real effort to make a good article... but what can I say... I procrastinate alot and never seem to get something done.

    ReplyDelete
  24. for long time i searched for this advertisement widget. Finally came to this place.

    ReplyDelete
  25. I am happy you people find it useful and yeh sorry for the late reply I just got a chance to pay a visit to my blog after a long break! :P Thank you all for your love.

    ReplyDelete
  26. i want to make a random header banner 468x60. how to do that

    ReplyDelete
  27. @KVM Switches
    Where it is written that this is a trick?

    ReplyDelete
  28. Could I make this work with 468x60 banners on the header? If so, how? Just change width and height maybe?

    ReplyDelete
  29. @Samsexy

    Thanks for spotting the spammer! This is a new spamming technique that is being utilized these days. The text is written in a complex style that you cant even understand what it says.

    @Jitendra @ Stuart

    Of course you can and thanks for the new idea. I will write a detailed post on it. Please be patient. The codings will be different.

    ReplyDelete
  30. No problem! And thank you a million, I've been looking everywhere for one that works but can't find one. Eagerly awaiting! Thanks!

    ReplyDelete
  31. @Mohammad
    I used to kick out spammers on Linkbucks forums by helping the Moderators, so I can understand a bit easily who is a spammer. :)

    ReplyDelete
  32. Thanks for post. I wanted to ask whether there is a flexible script that you can adjust the length and width
    http://compteh.10xl.net

    ReplyDelete
  33. @Yuriya

    you will have to do that manually by adjusting width="". Let me know if you needed more help. :>

    ReplyDelete
  34. @Mohammad, might this is NOT included on the topic but I would like to know how can we get Advertisers as you do. I mean it shall be a website or smth :-?
    For exemple, you got those banners in the right top corner on your blog. Did those advertisers pay you?

    I look forward to hearing an answer.

    xoxo, Mary

    ReplyDelete
  35. @Mary

    Mary I apologies for the late reply and now to compensate your query I must write a post on it. Give me just two days and you will have a detailed answer in front of you. :D

    ReplyDelete
  36. This is the best post I have found for this subject in regards to what I am trying to do and I have got it working for my blog! Yay!
    BUT I have a question/request - as far as I can tell from the code and watching my site, this only changes from 2 images in each block, is there a way I can make this function for 6 (or more) blocks with the randomization of 6 (or more) different pictures so that no picture is duplicated in the display when it is viewed? Basically, I need to show 6 image blocks (with the possibility of it growing) but I want the randomization to occur from top to bottom with each picture rotating so that no image is always at the top-most or bottom-most position and there are no duplications in the images when it is being displayed. I hope that is understandable!

    ReplyDelete
  37. I am facing problem with my template. I want to make my sidebar wider (About 260px) but I could not do this. I need ur help.
    http://fishclickbd.blogspot.com

    ReplyDelete
  38. please tell me this trick working on ads for indians........

    ReplyDelete
  39. Thanks man I've been looking all day for somenthing like this all day, and finally I found it, your website has helped me alot!

    ReplyDelete
  40. this is a very nice one bro, thanks very much.

    ReplyDelete
  41. Hi, how do i make that when someone click on banner it opens in another page, so i won't lose visitors..?

    ReplyDelete
  42. Hi...

    I would like to ask.
    How to reload the ads without refreshing the website or the page of the website. I mean just the ads itself changing. You can see Sharebeast.com for example. Each 30 seconds the ads will change to another ads without the page being refresh.

    Thanks in advance. visit my blog www.previewmusik.com

    ReplyDelete
  43. @Epic-Fun

    just edit the < a > tag with target='_blank'

    is this what you means?

    ReplyDelete
  44. Dear Moha,

    Thanks for the informative articles

    I have several questions and I will ask them under this article,

    1. Is ti possible that I create my own banners such that advertisers would automatically upload their adverts on my blog and pay without leaving the site?

    2. My blog description does not show when I use Meta Tag Analyzer

    3. The search results of my blog on google.com and google.co.ke is different. How do I get my blog crawled by google.co.ke

    http://jobsandcareersinkenya.blogspot.com/

    ReplyDelete
  45. good post Ahmedzai... i will try this.... thanks

    ReplyDelete
  46. My lot of thanks for you..
    good post..good way..

    ReplyDelete
  47. Great idea! How can we implement it for 300x250 banner so to display the ad in random?

    ReplyDelete
  48. This comment has been removed by the author.

    ReplyDelete
  49. Thanks- really easy to work with. That was quite helpful.

    ReplyDelete
  50. nice one, but I want to open the links in a new page, so the ppl dont leave my blog. How can I do this? Any tips on how to change the code?

    ReplyDelete
  51. Dear Sir,
    I would like to thank you from the depth of my heart for sharing this code.It gave solution to my needs and I can proceed building my site!
    Greetings from Greece,
    Labros

    ReplyDelete
  52. How can i earn money with this?

    ReplyDelete