Menu Vertical Color Verde Claro


Este es otro menu con las mismas caracteristicas de los hechos con HTML y CSS.

El aunque es parecido tiene algunas pequeñas modificaciones como las imagenes de fondo.

Esta es una imagen de como queda el Menu:



A continuacion los respectivos codigos que debes implantar 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ódigos CSS



#side_menu { 
                   margin: 0 0 20px 0; 
                   width: 220px;
        }

 #side_menu li { 
                   list-style: none; 
        }

 #side_menu li a { 
                   color: #3F6C24; 
                   border: 0; 
                   margin: 0 0 1px 0; 
                   display: block; 
                   background: #fff url(imagen 1) repeat-x; padding: 8px 10px;
                   text-decoration:none;
        }

 #side_menu li a:hover { 
                   color: #fff; background: #fff url(imagen 2) repeat-x; 
        } 
 

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

       img {
       border: none;
       }


Estas son las imagenes utilizadas como fondo, guardalas y subelas a un servidor ó a picasa que es el determinado para blogger.

Imagen 1



Imagen 2



En estos trozos de codigo es donde debes intrducir la url de las imagenes: (url imagen).

Código HTML


Este codigo lo debes poner en la sidebar, en la pestaña Diseño, Añadir un Gadget eliges en HTML/javascript y colocas el siguiente código: 


<div id="side_menu">
  <ul>
   <li><a href="#1" title="Link 1">Pon lo que quieras</a></li>
   <li><a href="#2" title="Link 2">Pon lo que quieras</a></li>
   <li><a href="#3" title="Link 3">Pon lo que quieras</a></li>
   <li><a href="#4" title="Link 4">Pon lo que quieras</a></li>
   <li><a href="#5" title="Link 5">Pon lo que quieras</a></li>
   <li><a href="#6" title="Link 6">Pon lo que quieras</a></li>
   <li><a href="#7" title="Link 7">Pon lo que quieras</a></li> 
  </ul>

</div>

Subir