Follow these steps to add light green vertical menu bar to you blogger.
- Go To Blogger > Layout > Edit HTML
- Save your template
- Paste the following code just above ]]></b:skin>
| #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTLeuvgv25e_VcgXazhj4tc7hEUo1W70R_L71SQBDde3em8_YldQdjiHAZcN5sWdbuZnDdWAce1wQa0NtYwRLlYtWh6LS5zQzsZqrpful9gyI4hyNZGaNEnqJCZD9YkGVTU5ohAxprKul/s1600/arrowgreen.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTLeuvgv25e_VcgXazhj4tc7hEUo1W70R_L71SQBDde3em8_YldQdjiHAZcN5sWdbuZnDdWAce1wQa0NtYwRLlYtWh6LS5zQzsZqrpful9gyI4hyNZGaNEnqJCZD9YkGVTU5ohAxprKul/s1600/arrowgreen.gif); padding: 8px 0 0 10px; } |
){kind=link}
;){kind=link}
4.This step have two parts
- If you have a right sidebar then paste the following code just below <div id='sidebar-wrapper'> or this <div id='sidebar-wrapper-right'>
- If you have a left sidebar then paste the following code just below <div id='sidebar-wrapper-left'>
| <div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div> |
