ブログのトップページの画像をページを表示されるたびに変えたい

ブログ始めました(^_^;)


過去の質問を読んでみましたが、私のブログ用にどう直せばいいのか分かりません。「banner」のトコがポイントのようですが、私の場合、
「CSS」の、
div.blog-title-outer {
text-align: left;
width: 765px;
margin: 0 auto 5px;
background: transparent url( ) no-repeat left top;
height: 155px;
}
というのがソレだと思うのですが...

で、
「トップページ」の、
<div class="blog-title-outer">
以下に、コピペしてみましたが、

<div id="banner">
バナー
</div>
<script type="text/javascript"><!--
new function(){
var img_list = new Array(
"image.blog.livedoor.jp/sj011/imgs/1/d/1dadda42.jpg",
"image.blog.livedoor.jp/sj011/imgs/8/2/8299246e.jpg",
"image.blog.livedoor.jp/sj011/imgs/8/2/825f86f4.jpg",
"image.blog.livedoor.jp/sj011/imgs/1/4/1455328e.jpg",
"image.blog.livedoor.jp/sj011/imgs/8/8/88fd5a38.jpg");
var img = img_list[Math.floor(Math.random()*(img_list.length))];
document.getElementById("banner").style.backgroundImage='url('+img+')';
};
//-->
</script>

どこを直せばよいか分かりません。
また、
「個別記事ページ」「カテゴリアーカイブ」「月刊アーカイブ」
の全てに追記する必要があるのでしょうか?
かなりの初心者です。すいませんが、
アドバイス、お願いします＜(_ _)＞

こちらをどうぞ。

<script type="text/javascript"><!--
new function(){
  var img_list = [
    "http://image.blog.livedoor.jp/sj011/imgs/1/d/1dadda42.jpg", 
    "http://image.blog.livedoor.jp/sj011/imgs/8/2/8299246e.jpg", 
    "http://image.blog.livedoor.jp/sj011/imgs/8/2/825f86f4.jpg",
    "http://image.blog.livedoor.jp/sj011/imgs/1/4/1455328e.jpg",
    "http://image.blog.livedoor.jp/sj011/imgs/8/8/88fd5a38.jpg"];
  var img = img_list[Math.floor(Math.random()*(img_list.length))];
  var el = document.getElementsByTagName("div");
  for(var i = 0; i < el.length; i++)
    if(el[i].className == 'blog-title-outer') {
      el[i].style.backgroundImage='url('+img+')';
      break;
    }
};
//-->
</script>

挿入場所は

<div id="content" class="hfeed">

の上の行辺りでどうでしょうか。

↓も不要です。

<div id="banner">
バナー
</div>

難し過ぎる、私も挑戦したが出来なかった。

かなりのハイレベルの知識が必要だ。

諦めた方が良い。

実際に試してないのでうまくいくか分かりませんが
これなんてどうでしょうか？