1. Login ke Blogger
2. Klik Design/Rancangan-->>edit html
3. Centang Expand Widget Template
4. Cari kode]]></b:skin>
5. letakkan Kode CSS dibawah ini tepat diatas kode]]></b:skin>
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid white;
padding: 15px 20px 15px 20px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image:
url('http://i785.photobucket.com/albums/yy131/djnand/MenuCokelat.jpg');
/* Align the background image position to the left of the link */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}
#menu li a:hover {
color: white;
/* Align the background image position of the background to the right*/
background-position:right;
}
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid white;
padding: 15px 20px 15px 20px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image:
url('http://i785.photobucket.com/albums/yy131/djnand/MenuCokelat.jpg');
/* Align the background image position to the left of the link */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}
#menu li a:hover {
color: white;
/* Align the background image position of the background to the right*/
background-position:right;
}
6. letakkan HTML dibawah ini setelah Kode <body>
<ul id="menu">
<li><a href="#">Home</a></li> <li><a href="#">Products</a></li>
<li><a href="#">Services</a></li> <li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<li><a href="#">Home</a></li> <li><a href="#">Products</a></li>
<li><a href="#">Services</a></li> <li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
7. simpan templet dan lihat hasilnya
