blogspot hack #2: random images in the header

i wanted to have a picture right beside the blog title (up there). not a big one, just a small teeny tiny one to "complement" the title. so i put one using hack #1. but that got tiring after 2 days. so i was looking around and found a hack that changes the subheader randomly. what if i change the code to change my header image ramdomly...? hmmmm...

hack #2 is the result. refresh the page a few times and you'll get what i mean.

this hack may or may not work for your blog depending on the design template you are using.

how
in your template, look for:

<div id="header"><div>

right after the code above, insert the code given below. change the images to the ones you like, please don't use mine.

to simplify things, i used the same dimensions for my images (80px by 55px @ 72dpi). i uploaded all five images to blogger, taking note of their addresses and plugging them into the code:

<script language="javascript">
var starttxt='<img width="80" height="55" 
  alt="revolving header picture" 
  style="margin: 10px 10px 10px 10px; 
  float: left; cursor: pointer;" src="';
var endtxt='" alt="" border="0" />';
var midtxt=new Array(
  'http://photos1.blogger.com/blogger/537/1682/1600/header1.jpg',
  'http://photos1.blogger.com/blogger/537/1682/1600/header2.jpg',
  'http://photos1.blogger.com/blogger/537/1682/1600/header3.jpg',
  'http://photos1.blogger.com/blogger/537/1682/1600/header4.jpg',
  'http://photos1.blogger.com/blogger/537/1682/1600/header5.jpg'
);
document.write(
  starttxt + 
  midtxt[Math.round(Math.random()*(midtxt.length-1))] + 
  endtxt);
</script>
<noscript>
  <img width="80" height="55" 
  alt="My Photo" 
  style="margin: 10px 10px 10px 10px; 
  float: left; cursor: pointer;" 
  src="<$BlogOwnerPhotoUrl$>" alt="" border="0" />
</noscript>

if you want to use the code please change the images and use the dimensions that would work for you.

enjoy. i hope you like.