34

Rotating Random Image Banner in Every Page Load for Blogger Blog

Today, I will be teaching you how to add rotating random Image banner for your blog. This is useful especially to those who are engaged on banner exchange program wherein you can randomly show all of your banner exchange partners on your blog widgets as a rotated banners. The script shown on this tutorial will rotate a group of images or banners in your blog widgets or even in your blog post. The code takes a block of images you've created ahead of time, displays them in a columnar format and randomly swaps the images you set with each page load. Each image will also be linked to a website you designate. The code is written in javascript, so it should work with any blog or web platform.

If you are going to make use of this code, there is a random presentation of image banner for every page load and this is applicable for blogger blogs. So if you are one of the users of blogger platform, you can make use of this. Well, if not, I suggest you should try because blogger is a good platform to use when it comes to blogging, optimization and the like.

Here's How To Create Rotating Random Image Banner in Every Page Load

Step 1. Login to your Blogger Account using your Google account. Go to Blogger Dashboard.then Click on Layout tab from left pane and click on Add a Gadget link.



Step 2. After you click on Add a Gadget link a pop-up box will open now with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign on the upper left of the gadget.



Step 3. Select 'HTML/Javascript'  then put the modified rotating random image banner you made.


Here is the Rotating Random Banner Code




The code below is the one set of banner, you must modify those highlighted part of the codes;

images[0] = "<a href = '#' target='_blank' rel='nofollow' ><img src='image link' border='0' height='60' width='120' alt='Image Tag'></a>";

Code Customization:
  • images[0]  >> this will be the arrangement of images, the first code must starts at 0 the 1 for the next image and so on and so fort.
  • #               >> Replace this with the link/website where you want to redirect your visitor if they click the banner image
  • nofollow    >> If you want to make the link with dofollow attribute just replace it with dofollow
  • image link  >> Replace it with the image link you want to show on specific links
  • 60             >> Change the height of image in pixel you preferred
  • 120           >> Change the width of your image in pixel you preferred
  • Image Tag >> Replace it with the Name of the link, this text will show when you mouse over on the banner image
  • <!--  BANNER#1  --> this will be your guide if you are planning to add more than one banner in a line



If you want to add more than one image in a row you just need to add new set of banner similar with the set of codes below (3 sets of banner in a row)


If you have further quires about this rotating Random Image Banner just post your comment below, thanks
The Author

I'm Frank from Philippines. born on July 20, 1986 Author of www.theblogservices.net. I was a blogger since July 2010, I have a great passion about blogging and all other stuff online. Follow Me on Google+ or Like our official FB Page HERE

Related Post



34 comments:

  1. Replies
    1. Your welcome.. Thanks for being our active blog readers and commentator.. see you around.

      Delete
  2. I am new to learning html coding. This post was very helpful and appreciated. Thanks!

    ReplyDelete
  3. You definitely write clear ins instructions, I love that. I have never understood code and end up hiring someone that is able to help me out. Maybe I will try something on my own so I can learn.

    ReplyDelete
    Replies
    1. Thanks for appreciating my blog post. I will surely post more about this coding thing related to blogging.. Thanks also for being active commentator of my blog.. Happy blogging!

      Delete
  4. This is awesome! I am bookmarking for later use!

    ReplyDelete
  5. Oh, how I miss my blogspot blog! I recently made the switch to WP...and while it's okay, it's very overwhelming! This is a great instructive post that would have really helped me!

    ReplyDelete
  6. Your instructions are really easy to follow; I'll have to try this out!

    ReplyDelete
  7. I love reading your blogs .. I think I like the way you explain it step by step with an image which makes it more easier for others to understand..

    Thanks for sharing

    ReplyDelete
    Replies
    1. welcome, and thanks too for appreciating my effort. Happy blogging!

      Delete
  8. Thanks for a great tutorial! I take all the blogging help I can get!

    ReplyDelete
  9. You always have great tutorials, But I dont use blogger, It would be nice if you do some great ones for wordpress, Thanks for this post

    ReplyDelete
    Replies
    1. Welcome, This rotating banner in every page load will work also on wordpress, give it a try then feedback here if it works.. thanks

      Delete
  10. Man I wish I knew code. This would definitely help me out.

    ReplyDelete
  11. This is interesting. I need to do this on my blog and I had no idea how to set it up.

    ReplyDelete
  12. I LOVE it that you are giving such specific directions to help me with something that I thought was WAY TOO HARD! I am pretty sure that I would be able to do this! THANKS! (@dapperhouse)

    ReplyDelete
  13. I really love this page! I am going to link to it in a post next week about blog tips. Thank you again!

    ReplyDelete
    Replies
    1. Welcome, please give me a feedback if it works for you, thanks

      Delete
  14. I've been thinking about adding this to my blog - thanks! Even though I am familiar with HTML, you explain it well for those who have less of a knowledge base.

    ReplyDelete
  15. I like how you broke it down in steps. I know a lot of tips like this can also apply to wordpress. Thanks for sharing!

    ReplyDelete
  16. Thanks for the code and the tips. This is great!

    ReplyDelete
  17. This is actually really helpful. I never knew about this. I'll have to check it out!

    ReplyDelete
  18. Bookmarked your page. I will do a lot of reading when I get the time to do so. Right now, my hands are tied up with work and with preparation for the holidays.

    ReplyDelete
  19. This is cool. thanks for sharing this tutorial. I used to try whatever blogging tuts i came across but now i got tired of adding code and banner stuff

    ReplyDelete
  20. This is a great tutorial! I have wondered how people do this! I will have to try it for sure!

    ReplyDelete
  21. Great info. I'm a total html dork...always need help in this area.

    ReplyDelete
  22. Thanks for the tutorial.,I never knew how to do that.

    ReplyDelete
  23. This is a great tutorial. I never thought it was that easy, I will bookmark this as I know I will be using it soon. Thanks!

    ReplyDelete
  24. Hi Frank, This is extremely good. I had checked for many options, but they did not have the simplicity and also the way to load randomly on each page load. I am implementing it in http://keeveees.blogspot.in/.. It works now. Still have some work to do on formatting etc

    Thanks for the post

    KVS

    ReplyDelete
  25. Applied and it is working fine now.

    ReplyDelete