Menu Vertical Color Azul


Este sencillo menu no pasee mayor caracteristicas, es sencillo y facil de implantar en tu plantilla.

Este se compone de códigos HTML y CSS, y como fondo una imagen.

aqui una muestra de como quedaria:



Seguimos con los códigos, el siguiente debes implantarlo de la siguiente manera: 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;
 }
 
#menu li a {
 height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 } 
 
#menu li a:link, #menu li a:visited {
 color: #FFF;
 display: block;
 background:  url(img/menu6.jpg);
 padding: 8px 0 0 19px;
 }
 
#menu li a:hover {
 color: #FFF;
 background:  url(img/menu6.jpg) 0 -32px;
 padding: 8px 0 0 19px;
 }


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

img {
    border: none;
}


A continuacion la imagen que deberas guardar y luego subirla a un servidor ó a picasa que es el determinado para blogger.



La url de la imagen la pegaras en la siguiente ubicacion del codigo.


#menu li a:link, #menu li a:visited {
 color: #FFF;
 display: block;
 background:  url(img/menu6.jpg);
 padding: 8px 0 0 19px;
 }
 
#menu li a:hover {
 color: #FFF;
 background:  url(img/menu6.jpg) 0 -32px;
 padding: 8px 0 0 19px;
 }


Código HTML


Este codigo lo debes poner en la sidebar, en la pestaña Diseño, eliges añadir un gadget en HTML/javascript 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