Menu vertical color Naranja


Este es un sencillo pero vistoso menu, su configuracion es muy sencilla y facil de implantar en nuestro Blog.

Este menu esta compuesto de códigos css y html usando imagenes como fondo.

Esta es una imagenen de como queda el menu:



Estos son 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

Codigo CSS




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

 #side_menu li { 
                   list-style: none; 
        }

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

 #side_menu li a:hover { 
                   color: #fff; background:  url(2a.gif) repeat-x; 
        } 
 
        #side_menu li a em {
 font-style:normal;
 color:#111; text-decoration:underline;
}

        #side_menu li a:hover em {
 font-style:normal;
 color:#fff; text-decoration:overline;
}

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

       img {
       border: none;
       }




En esta parte del codigo es donde debes de poner la url de las imagenes, en su respectiva ubicacion. (1a.gif)

Estas son las imagenes que debes guardar y luegos subirlas a unservidor o al propio picasa de Blogger.

Imagen 1a


Imagen 2a


Codigo HTML


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


<div id="side_menu">
  <ul>
   <li><a href="#1" title="Link 1" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#2" title="Link 2" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#3" title="Link 3" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#4" title="Link 4" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#5" title="Link 5" accesskey="p"><em>P</em>on lo que quieras</a></li>
     <li><a href="#6" title="Link 6" accesskey="p"><em>P</em>on lo que quieras</a></li>
   <li><a href="#7" title="Link 7" accesskey="p"><em>P</em>on lo que quieras</a></li> 
  </ul>
  </div>
Subir