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]-->
<!--[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>
<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>
<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
0 komentar:
Speak up your mind
Tell us what you're thinking... !