1. Login ke dalam Blogger, klik menu Design ---> Edit HTML
2. Scroll kebawah sampai anda menemukan kode <head>.
3. Copy kode dibawah ini dan paste sebelum kode <head>
<style type='text/css'>
ul {list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menuvertical {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menuvertical li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menuvertical li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jIqaiAkeCWCKXPl9bzZqKX27vH5N8odsBx23cmDyQ9VPBNMORvmv_ONvJ5o4TLlQYQimStMGXp75JBtWth_gFnSEObCT6Trhw-d3RV2YsttIeQRFwpDZx7q3gHsRH0bWYRhZArE8qKju/);
padding: 8px 0 0 10px;
}
#menuvertical li a:hover, #menuvertical li #current {
color: #FFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jIqaiAkeCWCKXPl9bzZqKX27vH5N8odsBx23cmDyQ9VPBNMORvmv_ONvJ5o4TLlQYQimStMGXp75JBtWth_gFnSEObCT6Trhw-d3RV2YsttIeQRFwpDZx7q3gHsRH0bWYRhZArE8qKju/) 0 -32px;
padding: 8px 0 0 10px;
}
</style>4. Simpan template anda
5. Klik menu Design ---> Page Element ---> klik "Add a gadget".
6. Pilih "HTML/Java Script" dan paste kode dibawah ini kedalamnya.
<div id="menuvertical"> <ul> <li><a href="#">Home</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Java Script</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
Note: Ubah # sesuai dengan url blog anda
7. Selesai. Tampilannya akan seperti gambar dibawah ini.
CSS Black Vertical Menu
Sumber: http://www.bloggertipandtrick.net
No comments:
Post a Comment