Banyak Gambar dalam Satu Header

Hallo sobat semua, maaf sebelumnya, karena sekarang sering telat posting. Untuk kali ini saya akan membahas Banyak Gambar dalam Satu Header. Lalu apa sih yang dimaksud banyak gambar?
Sobat bisa lihat contohnya di http://www.andyrutledge.com/cssslides.html. untuk menu berbeda ketika disorot header akan otomatis ganti background. Menarik bukan?

Bagi yang ingin membuatnya, silahkan ikuti langkah-langkah di bawah ini:

Mempersiapkan Gambar
Sobat persiapkan dahulu gambar yang akan digunakan atau sobat bisa membuatnya sendiri sesuai kreasi sobat dan diupload di hosting yang sobat pakai.

Membuat Script
1. Login di blogger
2. Menujut Rancangan - Edit HTML
3. Cari kode </title>

4. Tambahkan script dibawah ini di atas </title>

<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="http://www.andyrutledge.com/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

5. Cari kode ]]></b:skin>
6. Tambahkan kode di bawah ini di atas ]]></b:skin>

#picture {
margin: 5px auto 0;
width: 600px;
height: 150px;
background: url("URL Gambar ") no-repeat top left;
clear: both;
}
#nav {

margin: 0 auto;
margin-left:-10px !important;
width: 660px;
height: 40px;
background: #fff;
clear: both;
}
#nav ul {
list-style: none;
line-height: 40px;
font-weight: bold;
font-size: 12px;
}
#nav li {
float: left;
background: transparent;
}
#nav li a {
width:200px;
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#nav ul li a:hover {
color: #fff;
background: #000;
}
#nav li ul {
position: absolute;
background: #fff;
left: -5000px;
top: 50px;
}
#nav li li {
width: 600px;
}

li#blue a {
background: #09f;
}
li#red a {
background: #c00;
}
li#green a {
background: #390;
}
li#blue:hover ul {
left: auto;
margin-left: -40px;
width: 350px;
height: 150px;
}
li#red:hover ul {
margin-left: -240px;
left: auto;

width: 600px;
height: 150px;
}
li#green:hover ul {
margin-left: -440px;
left: auto;
width: 600px;
height: 150px;
}

7. Ganti yang berwarna biru dengan URL gambar yang akan ditampilkan begitu blog dibuka
8. Cari kode berikut atau yang mirip

<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
</b:section>
</div>

9. Ganti kodenya menjadi

<div id='picture'> </div>
<div class='clearfix' id='nav'>
<ul><li id='blue'><a href='#' title='blue'>Header Kedua</a><ul><li><img alt='Blue' src='URL gambar kedua'/></li></ul></li>
<li id='red'><a href='#' title='red'>Header Ketiga</a><ul><li><img alt='Red' src='URL gambar ketiga'/></li></ul></li>
<li id='green'><a href='#' title='green'>Header Keempat</a><ul><li><img alt='Green' src='URL gambar keempat'/></li></ul></li>
</ul></div>

10. Ganti URL dan tulisan yang berwarna hijau
11. Simpan template

sumber::http://www.blogtopsites.com/