Menu lateral v4

Trazendo um novo modelo de menu lateral, um pouco parecido ,mas tambem diferente .
Podem visualizar a imagem acima é esse resultado final ,mas veja online:  Entre aqui...
Um menu lateral com hover bem simples para a sua sidebar.
Vamos entrar no seu painél do blog depois em esquema e adicione um gadget html/javascript e cole dentro o código abaixo.

/**--inicio menu lateral    http://best-tuga.blogspot.com/--**/
<style type="text/css">
#bt-lateral,
#bt-lateral ul,
#bt-lateral ul li,
#bt-lateral ul li a {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid ;
  border-radius:3px;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#bt-lateral {
  width: 300px;
  font-family: Bobber;
  color: #ffffff;
}
#bt-lateral.align-right {
  float: right;
}
#bt-lateral:after,
#bt-lateral ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#bt-lateral ul li {
  display: block;
  z-index: 1;
  background: #222222;
}
#bt-lateral ul li::after {
  content: '';
  width: 100%;
  height: 8px;
  position: absolute;
  z-index: 2;
  bottom: 10px;
}
#bt-lateral ul li a {
  display: block;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  color: #ffffff;
  z-index: 3;
}
#bt-lateral ul li a:hover,
#bt-lateral ul li.active a {
  color: #000000;
}
#bt-lateral ul li:hover,
#bt-lateral ul li.active {
  background: #ff004f;
  background: -moz-linear-gradient(bottom, #ff004f 0%, #ff004f 50%, #ff004f 51%, #ff004f 78%, #ff004f 100%);
  background: -webkit-linear-gradient(bottom, #ff004f 0%, #ff004f 50%, #ff004f 51%, #ff004f 78%, #ff004f 100%);
  background: -o-linear-gradient(bottom, #ff004f 0%, #ff004f 50%, #ff004f 51%, #ff004f 78%, #ff004f 100%);
  background: -ms-linear-gradient(bottom, #ff004f 0%, #ff004f 50%, #ff004f 51%, #ff004f 78%, #ff004f 100%);
  background: linear-gradient(to top, #ff004f 0%, #ff004f 50%, #ff004f 51%, #ff004f 78%, #ff004f 100%);
}
#bt-lateral ul li:hover::after,
#bt-lateral ul li.active::after {
  background: -webkit-linear-gradient(bottom, #ff004f 60%, #ff004f 61%, #ff004f 100%);
  background: -o-linear-gradient(bottom, #ff004f 60%, #ff004f 61%, #ff004f 100%);
  background: -ms-linear-gradient(bottom, #ff004f 60%, #ff004f 61%, #ff004f 100%);
  background: linear-gradient(to top, #ff004f 60%, #ff004f 61%, #ff004f 100%);
  background: -moz-linear-gradient(bottom, #ff004f;
}
</style>
<div id='bt-lateral'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>MENU1</span></a></li>
   <li><a href='#'><span>MENU2</span></a></li>
   <li><a href='#'><span>MENU3</span></a></li>
   <li><a href='#'><span>MENU4</span></a></li>
   <li class='last'><a href='#'><span>MENU5</span></a></li>
</ul>
</div>

Salve e veja resultado.
Agora procure isto:    width: 300px;  e coloque a sua largura;
Procure isto:   #   e coloque os seus links ;
Mude os nomes menu1,menu2,menu3 ,para os nomes vc quer.
Outra versão de menu lateral  duvidas disponha até mais...

Menu lateral v4

► 0

► menus

► Cartita