Menú Vertical sencillo con CSS en el Blog
Labels:
Personalizar
at
domingo, marzo 06, 2016
Con este menú sencillo y fácil lo que pretendo volver a lo básico que es siempre útil.
Para incluir este sencillo menú con CSS en tu blog de Blogger
Ir a:
Diseño ► Elementos de Página ►Agregar un Gadget elegimos ►HTML/Javascript donde copias el código:
<style type="text/css">
#menuc a{
padding-left: 4px;
display: block;
font-size: 14px; /* Tamaño de texto */
text-transform: uppercase; /*Si queremos en minúscula ponemos lowercase */
width: 200px; /* Ancho*/
color: #000000;
text-decoration: none;
border-left: 4px solid #bbbbbb; /* Color borde */
border-bottom: 1px solid #bbbbbb; /* Color línea inferior */
}
#menuc a:hover{
border-left: 3px solid #dddddd; /*Color de línea vertical */
background-color: #eeeeee; /* Color fondo*/
color: #2A211A; /* Color de letra seleccionada */
}
</style>
<div id="menuc">
<a href="URL">Enlace 1</a>
<a href="URL">Enlace 2</a>
<a href="URL">Enlace 3</a>
<a href="URL">Enlace 4</a>
<a href="URL">Enlace 5</a>
<a href="URL">Enlace 6</a>
</div>
Ejemplo
Como ven es muy sencillo y personalizable se pueden cambiar casi todo los valores
Si te gusta la entrada compártela.
¡Gracias!
Copyright © 2013
Cambio-Cambie Blogger
Diseñado por CCB Desarrollado por Blogger
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.
►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>
No olvides suscribirte para recibir las actualizaciones