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
4. Tambahkan script berikut di atasnya
5. Cari kode berikut ]]>
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)
9. Ganti dengan kode berikut
10. Ganti URL gambar dan label menu yang berwarna hijau
11. Simpan template