Banyak Gambar Dalam Satu Header

Langsung saja. 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 ketepatan dan 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 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 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. selesai sudah