Banyak Gambar dalam Header

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

Semoga bermanfaat, trik di sore hari dari Felix :D

Sumber : BlogDoctor
contoh :