20/2/15

[Tutoriales] Menu Vertical


Hola Bloggers hace mucho no publicaba aqui, pero eh estado ocupada ya que pronto entrare a clases tal vez publique menos en mis blogs, pero tratare de mantenerlos actualizados los mas posibles hoy les traigo un lindo menu para su blog espero les guste.

Vista Previa

Click en la imagen para verla mas grande


Paso 1:

Para este menú vamos a necesitar editar el html del blog ponemos este codigo en cualquier parte de la plantilla, aclaro debe ser antes de </head>

COPIA Y PEGA ESTO:
/* Menú Vertical
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 170px; /* ANCHO DEL MENÚ */
font-size: 10pt;
}
#menuvert ul li {
background-color: #FFFAFA; /* COLOR DE FONDO */
padding: 0px;
}
#menuvert ul li a {
color: #FF1493; /* COLOR LETRAS */
text-decoration: none;
display: block;
padding: 10px 10px 5px 20px;
border-bottom: 1px dotted red;
}
#menuvert ul li a:hover {
background: #FFE4E1; /* COLOR AL PASAR EL RATÓN */
border-left: 10px solid #FF3E96;
color: #B03060;
Lon que esta en azul es lo que hay que modificar

Paso 2:

 Ahora para crear nuestro menú nos vamos a:
Diseño -- Edición HTML --HTML/Javascript 


Click en la imagen para verla mas grande

 Cuando se abra la ventana solo es colocar el codigo de menu, que debe ir asi: 

 <div id="menuvert">
<ul>
<li><a href="URL">texto^^</a></li>
<li><a href="URL">texto^^</a></li>
</ul>
</div>

 Les explico ese codigo es para hacer una lista, y pues el codigo de link (a href="") esta dentro de este, solo deben colocar el link y ponerle un texto para que los direccione, asi es como se hace el menu.

Espero les gustara, ya saben dudas, sugerencias o cualquier cosas puden decirmelas por el cbox o en un comentario, Nos vemos.



No hay comentarios:

Publicar un comentario