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.




















