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