Banyak Gambar Dalam Satu Header

Saya menemukannya di blog berikut http://www.andyrutledge.com/cssslides.html. Langsung saja Anda melihat contohnya. Nah, bagus bukan, untuk menu berbeda ketika disorot header akan otomatis ganti background. Bagi yang ingin membuatnya, silahkan ikuti langkah-langkah di bawah ini:

Membuat Gambar/Mempersiapkan
Memang sedikit repot karen trik ini butuh ketepatandan kesamaan gambar. Jadi buatlah dahulu gambar Anda di coreldraw atau yang lainnya.

Upload Gambar
Upload gambar Anda di berbagai file hosting kesukaan Anda. Terserah Anda yang penting dapatkan URLnya.

Modifikasi Script
1. Login ke blogger
2. Menujut Tata Letak - Edit HTML
3. Cari kode berikut </title>
4. Tambahkan script berikut di atasnya

<!-- 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 berikut ]]></b:skin>
6. Tambahkan kode berikut di atasnya
#picture {
margin: 5px auto 0;
width: 600px;
height: 150px;
background: url("URL Gambar Default") 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 merah dengan URL gambar default pertama tampil begitu blog dibuka
8. Cari kode

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

(atau yang mirip)
9. Ganti dengan kode berikut

<div id='picture'> </div>
<div class='clearfix' id='nav'>
<ul><li id='blue'><a href='#' title='blue'>Second Header</a><ul><li><img alt='Blue' src='SECOND GRAPHIC URL'/></li></ul></li>
<li id='red'><a href='#' title='red'>Third Header</a><ul><li><img alt='Red' src='THIRD GRAPHIC URL'/></li></ul></li>
<li id='green'><a href='#' title='green'>Fourth Header</a><ul><li><img alt='Green' src='FOURTH GRAPHIC URL'/></li></ul></li>
</ul></div>

10. Ganti URL gambar dan label menu yang berwarna hijau
11. Simpan template

Sumber: BlogDoctor, Thx Vin!