July 4, 2010

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 »

84 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. This comment has been removed by the author.

    ReplyDelete
  2. Great work but I have one doubt that wont it slow the load time of website.Load time is a crucial factor in SEO.what do you think?


    Microsoft 2010 Product key

    ReplyDelete
  3. Nice Post Mustafa, I will try to use it in my blog, thanks.

    ReplyDelete
  4. Thanx mustafa...very nice post. Im thinking to use it in my website

    ReplyDelete
  5. 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
  6. @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
  7. wow...its cool
    why you aren't make like meta tag generator my friend...;))
    nice nice...

    ReplyDelete
  8. 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
  9. Great......this is the one i m looking for.....its look great on my blog..........
    http://topblogger1.blogspot.com/

    ReplyDelete
  10. @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
  11. bro dun laugh at ma quest... m actually new in business... so plz assist me...
    How can I post to my blog?

    ReplyDelete
  12. thanks mohammed nice topic

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

    ReplyDelete
  14. 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
  15. 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
  16. nevermind Moh! i did it myself :D!!! Ty for read anyway :D !

    yyaabadabaduuu xD


    xoxo,mary (•ิ_•ิ/)

    ReplyDelete
  17. 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
  18. 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
  19. sorry i mean best of luck :D

    ReplyDelete
  20. sorry mustafa

    fahad sarwar

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

    ReplyDelete
  22. happy idul fitri
    taqobalallahu mina wa minkum

    ReplyDelete
  23. Well, a very nice tutorial.

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

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

    ReplyDelete
  25. Love your templates. I hope to be able to make my own one day.

    flash website templates

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

    ReplyDelete
  27. After read blog topic's related post now I feel my research is almost completed. happy to see that.Thanks to share this brilliant matter.
    Essay Writing Help

    ReplyDelete
  28. Great article helped me a lot

    ReplyDelete
  29. 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
  30. 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
  31. for long time i searched for this advertisement widget. Finally came to this place.

    ReplyDelete
  32. 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
  33. i want to make a random header banner 468x60. how to do that

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

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

    ReplyDelete
  36. @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
  37. 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
  38. @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
  39. nice post.

    http://www.xionsms.com

    ReplyDelete
  40. 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
  41. @Yuriya

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

    ReplyDelete
  42. @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
  43. @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
  44. 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
  45. @Mohammad
    I love this article and it is so fabulous and I am gonna save it...

    SHUBHAM MEHTA
    http://www.smashingGadget.blogspot.com

    ReplyDelete
  46. this code might help alot thanks for shairng
    pull up banner

    ReplyDelete
  47. 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
  48. please tell me this trick working on ads for indians........

    ReplyDelete
  49. nice informative post,it is working properly
    pull up banner

    ReplyDelete
  50. nice post mohammad
    http://latestjobsinorissa.blogspot.com/

    ReplyDelete
  51. 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.argumentative essay format

    ReplyDelete
  52. Your depiction is attention-grabbing. Thanks for the widget.
    Phone sex uk

    ReplyDelete
  53. 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
  54. this is a very nice one bro, thanks very much.

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

    ReplyDelete
  56. 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
  57. @Epic-Fun

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

    is this what you means?

    ReplyDelete
  58. 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
  59. good post Ahmedzai... i will try this.... thanks

    ReplyDelete
  60. I must say that overall I am really impressed with this blog. It is easy to see that you are impassioned about your writing. I wish I had got your ability to write. I look forward to more updates and will be returning.
    how to increase website traffic

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

    ReplyDelete
  62. Nice coding.

    am used in my site > www.padugai.com

    but, don't know. How to set keyphrase in bottom of the image?

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

    ReplyDelete
  64. Banner design widgets, very useful and so much essential in today's world.

    ReplyDelete
  65. Good stuff. It is interesting to read comments.Coach Training

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

    ReplyDelete
  67. Your article is very informative and coherent. I'm happy that I stumbled upon your page and hope to find more articles of such caliber on this site in the future.
    Dissertation Writing Services

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

    ReplyDelete
  69. Great job on the pleasant piece which surely everyone was happy with. All the details was fun but useful at the same time. Thanks for keeping us interested!
    Custom Essay Writing Services

    ReplyDelete
  70. 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
  71. Extraordinary work on the charming piece which unquestionably every living soul was content with. All the items was fun however functional in the meantime. A debt of gratitude is in order regarding keeping us intrigued!London escorts.

    ReplyDelete
  72. 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
  73. Thanks for Author . I will to try on my Blog: Change24h.net
    :D

    ReplyDelete
  74. thank you mbt for this widget.....

    thank you
    www.nptricks.com

    ReplyDelete