Menu Vertical Color Gris Claro


Este es otro de los menus hecho con códigos HTML y CSS con imagen de fondo, por lo tanto es muy sencillo de implantar.

Esta es una imagen de como quedara este menu:



A continuación los codigos a implantar en tu plantilla. vas a Diseño, eliges la pestaña Edición de HTML y justo antes de ]]></b:skin> colocas el siguiente codigo.

Código CSS



#menu {
 width: 200px;
 margin: 10px;
 border-style: solid;
 border-color: #656556;
 border-size: 1px;
 border-width: 1px;
 }
 
#menu li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 } 
 
#menu li a:link, #menu li a:visited {
 color: #000;
 display: block;
 background:  url(img/11.jpg);
 padding: 8px 0 0 20px;
 }
 
#menu li a:hover {
 color: #fff;
 background:  url(img/11.jpg) 0 -32px;
 padding: 8px 0 0 25px;
 }


ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

img {
    border: none;
}

Como habia mencionado anteriormente el menu incluye imagen, que a continuacion pondrea tu dispocision para que las guarde y subas a tu servidor o a picasa que es el utilizado por Bloger.

11



Despues de subir las imagenes a Bloger obtenemos la url y la insertamos en los siguiente tramo del codigo css: (img/11.jpg)

Código HTML


Este es el codigo que va en la sidebar, solo tiene que ir a la pestaña Diseño y en Añadir un Gadget eliges HTML/javascript y colocas el siguiente código:


<div id="menu">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
<li><a href="#6" title="Link 6">Link 6</a></li>
<li><a href="#7" title="Link 7">Link 7</a></li> 
  </ul>
  </div>

Subir