Random Rotating Banners for Blogger-beta
Switching over to the blogger-beta template is a piece of work if you have customized your site at all. Most things were no problem, however the one piece that was the most difficult was being able to keep the nifty random banner at the top of the page. I kept trying to make myself settle for a code not quite like what I wanted; but I can't give up on a little problem like this once I've started trying to figure it out.
So this is my public service announcement for people out there without a decent explanation of how to do this. Actually, that is not completely true, there is already at least one pretty good tutorial which I started out with. It is over here, and it works pretty well. However, it puts the banner in as a background image instead of an <img>, which is pretty limiting. It is clunkier, non-resizable, and most bothersome to me, you can't make it a link back to your main page.
So instead, there is a way you can put it in directly, not as a background. First, go to the html editor and expand it to show the widget code. Then find the part (shortly after the css garbage ends) that says:<b:widget id='Header1' locked='true' title='YOUR BLOG NAME HERE (Header)' type='Header'>
<b:includable id='main'>
Then paste this:<div style="padding-bottom:3px; padding-top:3px;text-align:center;">
The "padding-top" and bottom stuff at the beginning is specific to me since I like having that little frame around the picture, so if you don't like that you can change it, but otherwise all you need to do is get your own appropriately-sized pictures and put them in there. You can have as many as you want as long as you start counting at 0, update the (4*Math.random()) to the maximum banner number that you have, and if you want more than 9 place the number in the parentheses of "new Array()"
<a href="http://two-sheds.blogspot.com">
<script type="text/javascript">
var banner= new Array()
banner[0]="<img src='http://examplehostingsite.com/banner0.jpg' />"
banner[1]="<img src='http://examplehostingsite.com/banner1.jpg' />"
banner[2]="<img src='http://examplehostingsite.com/banner2.jpg' />"
banner[3]="<img src='http://examplehostingsite.com/banner3.jpg' />"
banner[4]="<img src='http://examplehostingsite.com/banner4.jpg' />"
var random=Math.round(4*Math.random());
document.write(banner[random]);
</script></a>
</div>
So, people of the future who googled this, I hope this helps.
Update: Commenter Aquafina made the astute observation that if you still have the title of your blog in your banner as text you need to take it out, and has provided a link to a page that explains how to do that.
11 comments:
thanks.. ive been looking for this for quite some time now.. you're a great help =).. merry christmas to you and your family
You are welcome. I am happy I could be of service.
Thank you so much, this was very helpful. Although, because this code adds a banner to my already existing banner, I had to upload an image of a thin strip of white to "hide" my real banner. After doing that, this code worked wonders! Thank you again, and check out how it works on my page if you like.
Finally, a code that actually works for this purpose! Thanks for sharing it! =D
Tip: Even though you can now have more than 1 banner with this code, you need to remove the default banner of your blog. To do that, go here:
http://bloggerfordummies.blogspot.com/
2007/03/new-blogger-how-to-remove-
text-title.html
(Connect parts of the above for it to work in your address bar.)
Ugh, this still doesnt work for me. What do I need to remove for this to work?
I come from the future to say Thank You! I just used your instructions to do this on my blog today, and it worked like a charm. (Also used the link given by Aquafina to get rid of the old header. Thanks, Aquafina)
I like your improvement of making the header be a link back to the homepage. You rock. Glad Google found you.
*End dispatch from the future*
Oh my word, I tried about 5 other tutorials before this one and this is the only one that worked! Thanks so much, you rock :)
It does still show the header that was there initially, but to get round that u just remove the image header you had originally, and then in Layout > Fonts and Colours you change the Blog Title colour to white and make the font small (to hide the text title)
And voila! Yay, I'm stoked :)
Hi! Like you, I found several sites that promoted this trick, but like you, again, I liked my clickable header, so, I went with your advice. Still a bit to do but it appears to be working on my test site. So, like a blast from the past, your post again has one more thank you.
Take Care,
Peter
working like a charm. great post
uhm, it works for my blog, but i want to get rid of my blog name too, how can i do it?
I come way, way , way from the future to thank you! I struggled with *many* other blog tutorials in order to put a rotating banner; this is the only one that worked. Thank you, thank you so much!
Post a Comment