1. Login ke Blogger
2. Klik Design/Rancangan-->> pilih edit html
3. Centang Expand Widget Template
4. Cari kode ]]></b:skin>
5. letakkan Kode CSS dibawah ini diatas kode ]]></b:skin>
#menucss3 {
float:left;
}
ul#fourthmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#fourthmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:black;
}
ul#fourthmenu a.current {
background-color:#B0E137;
}
ul#fourthmenu a:hover, ul#fourthmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("http://i785.photobucket.com/albums/yy131/djnand/menu4.jpg");
color:black;
}
float:left;
}
ul#fourthmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#fourthmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:black;
}
ul#fourthmenu a.current {
background-color:#B0E137;
}
ul#fourthmenu a:hover, ul#fourthmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("http://i785.photobucket.com/albums/yy131/djnand/menu4.jpg");
color:black;
}
6. cari Kode <body> dan letakkan Kode HTML dibawah ini di bawah kode <body>.
<div id='menucss3'>
<ul id='fourthmenu'>
<li><a href='#all' title=''>Home</a></li>
<li><a href='#' rel='graphicdesign' title=''>Projects</a></li>
<li><a href='#' rel='prints' title=''>Services</a></li>
<li><a class='current' href='#' rel='pweb' title=''>About Us</a></li>
<li><a href='#' rel='experiments' title=''>Tutorials</a></li>
<li><a href='#' rel='photography' title=''>Contact Us</a></li>
</ul>
</div>
<ul id='fourthmenu'>
<li><a href='#all' title=''>Home</a></li>
<li><a href='#' rel='graphicdesign' title=''>Projects</a></li>
<li><a href='#' rel='prints' title=''>Services</a></li>
<li><a class='current' href='#' rel='pweb' title=''>About Us</a></li>
<li><a href='#' rel='experiments' title=''>Tutorials</a></li>
<li><a href='#' rel='photography' title=''>Contact Us</a></li>
</ul>
</div>
7. simpan templet & lihat hasilnya
