menu vertical a partir de lista

Menú vertical con botones usando la lista de enlaces blogger

Crear un menú de navegación no es nada complicado, y menos si utilizamos el gadget que blogger ofrece de lista de enlaces.

Basicamente lo que vamos a hacer, es agregar estilos a la lista de enlaces que blogger facilita, con el fin de crear botones para dichos enlaces, y para que estos luzcan más sofisticados, usaremos como fondo gradientes, aprovechando la existencia de este generador de gradientes, que en su código ya incluye un filtro, para que sea visualizado en Internet Explorer.

Ventajas

• Los enlaces se verán como auténticos botones recién salidos de photoshop
• Puedes editar los colores de los botones las veces que quieras editando el valor del background
• Usarás lo que tienes en casa (lista de enlaces de blogger) y por lo tanto te ahorrarás el código HTML para crear los enlaces
  
• Puedes seguir agregando todos los enlaces que necesites editando el gadget de lista de enlaces
• No usarás ninguna imagen, por lo que no necesitarás crear una  
• Puedes crear muchas listas de enlaces usando los mismos estilos u otros diferentes

Para decirte como aplicarlos, voy a usar como ejemplo gradientes negros.

Importante: Antes de empezar, es necesario decirte que en el código CSS abajo, estoy identificando a la lista de enlaces como si fuera la primer lista que agregas, blogger las va numerando de forma sucesiva, entonces, si es tu segunda lista de enlaces, en lugar de LinkList1 usarás LinkList 2 o si esla tercera LinkList3 y así sucesivamente. Ahora empecemos...


Paso 1. Ve a Diseño►Elementos de la página.

Paso 2. Haz click en añadir un gadget, en la sección de tu plantilla que quieras colocarlo, luego selecciona la opción lista de enlaces y agrega todos los enlaces que necesites.

Paso 3. Ve Diseño►Diseñador de plantillas►Avanzado►Añadir CSS

Paso 4. Agrega los estilos para la lista de enlaces (código CSS), y será algo como esto, pensando en que es la primera lista de enlaces que agregas, si es la segunda, cambiarás  #LinkList1 por  #LinkList2 en cada parte del código que lo contiene, si es la tercera por # LinkList3,  y así susesivamente...

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

#LinkList1 li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estios para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid #000000;
background: #45484d; /* old browsers */
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 1px 1px #777;
}

#LinkList1 a:link, #LinkList1 a:active, #LinkList1 a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #0e0e0e; /* old browsers */
background: -moz-linear-gradient(top, #0e0e0e 3%, #7d7e7d 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#0e0e0e), color-stop(99%,#7d7e7d)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* ie */
color: #ffffff;
}

NOTA: Recuerda que al pegar código en Añadir CSS, en un principio, no es identificado,  para solucionar eso, situa el cursor después de esta llave {  por ejemplo, y luego haz click en la tecla enter, verás que inmediatamente es interpretado lo que has agregado y podrás ver los botones.

Paso 5. Ahí abajo puedes ver como lucen tus botones, una vez que te gusten los resultados, haz click en APLICAR AL BLOG.

Aquí les tengo diferentes estilos de botones, pueden verlos en el DEMO, si les gusta alguno, solo copien el código CSS y agreguenlo en añadir CSS, como les decía allá arriba, o bien armen los propios según sus gustos y/o necesidades :).

Botones Morados

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

#LinkList1  li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estilos para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid #a849a3;
background: #e570e7; /* old browsers */
background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 1px 1px #ccc;
-webkit-border-radius:  16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: 1px 1px 4px #777;
-webkit-box-shadow: 1px 1px 4px #777;
 box-shadow: 1px 1px 4px #777;
}

#LinkList1 li a:link, #LinkList1 li a:active, #LinkList1 li a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #c85ec7; /* old browsers */
background: -moz-linear-gradient(top, #c85ec7 47%, #e570e7 98%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,#c85ec7), color-stop(98%,#e570e7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c85ec7', endColorstr='#e570e7',GradientType=0 ); /* ie */
color: #ffffff;
text-shadow: 1px 1px 1px #000;
}

Botones plateados

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

#LinkList1  li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estilos para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid #e5e5e5;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 0px 1px #e5e5e5;
-webkit-border-radius:  16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: 1px 1px 3px #ccc;
-webkit-box-shadow: 1px 1px 4px #ccc;
 box-shadow: 1px 1px 4px #ccc;
}

#LinkList1 li a:link, #LinkList1 li a:active, #LinkList1 li a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #e5e5e5; /* old browsers */
background: -moz-linear-gradient(top, #e5e5e5 2%, #ffffff 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#e5e5e5), color-stop(100%,#ffffff)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* ie */
text-shadow: 1px 1px 1px #000;
}

Botones Azules

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

#LinkList1  li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estilos para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 0px 1px #c8c8c8;
-webkit-border-radius:  16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: 1px 1px 3px #777;
-webkit-box-shadow: 1px 1px 4px #ccc;
 box-shadow: 1px 1px 4px #ccc;
}

#LinkList1 li a:link, #LinkList1 li a:active, #LinkList1 li a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #FF11EB; /* old browsers */
background: -moz-linear-gradient(top, #FF11EB 2%, #F7AFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#FF11EB), color-stop(100%,#F7AFFF)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF11EB', endColorstr='#F7AFFF',GradientType=0 ); /* ie */
text-shadow: 1px 1px 1px #777;
}

Probado en : Internet Explorer incluyendo IE6, Firefox, y Google Chrome, los botones que tienes esquinas redondeadas aparecen rectos en IE.

Menu margaritas

Aquí te traigo dos atractivos menús que podrás instalar fácilmente en tu blog. Únicamente sigue los pasos de la entrada y en poco tiempo podrás tener unas margaritas o un pez payaso decorando tus enlaces...

Diseño>añadir gadget (elemento de página)>html-javascript

Para instalar el menú "margaritas" pega este código:

<center><img style="border: 2px solid #C14E09;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9oO4j7huiS8CZedjeg57RUNPBGmHs4as3YWXCqhB9VtzGrA4ip_rO_1rJOj07O5F_5J4NmKLwoxJheNbgj0KK-JVRq2cGThK0We5vF0buTeVLXJU0TxmL_aCqx7sbbo3lQfB7TTdcUY/s320/blmargaritas.png" width="168" border="0" usemap="#blmenu_margarita" />
<map id="blmenu_margarita" name="blmenu_margarita" >
<area shape="rect" coords="33,4,130,39" alt="Inicio" title="inicio" href="URL PAGINA INICIO" />
<area shape="rect" coords="21,68,143,102" alt="Contacto" title="Contacto" href="mailto:DIRECCION CORREO" />
<area shape="rect" coords="22,125,143,160" alt="Suscribir" title="Suscribir" href="ENLACE SUSCRIBIR" />
</map></center>

Reemplaza URL PAGINA INICIO con la dirección de tu blog, DIRECCION CORREO con tu dirección de correo electrónico y ENLACE SUSCRIBIR conla dirección del Feed de tu blog.

Para la URL del feed puedes utilizar la de feedburner (en caso tenerla) o la que te muestro a continuación:

http://www.elbalcondejaime.blogspot.com/feeds/posts/default

No olvides sustituir elbalcondejaime por el nombre de tu blog.


Para instalar el menú "pez payaso" pega este código:

<center><img style="border: 2px solid #C14E09;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9oO4j7huiS8CZedjeg57RUNPBGmHs4as3YWXCqhB9VtzGrA4ip_rO_1rJOj07O5F_5J4NmKLwoxJheNbgj0KK-JVRq2cGThK0We5vF0buTeVLXJU0TxmL_aCqx7sbbo3lQfB7TTdcUY/s320/blmargaritas.png" width="168" border="0" usemap="#blmenu_payaso" />
<map id="blmenu_payaso" name="blmenu_payaso" >
<area shape="rect" coords="33,4,130,39" alt="Inicio" title="inicio" href="URL PAGINA INICIO" />
<area shape="rect" coords="21,68,143,102" alt="Contacto" title="Contacto" href="mailto:DIRECCION CORREO" />
<area shape="rect" coords="22,125,143,160" alt="Suscribir" title="Suscribir" href="ENLACE SUSCRIBIR" />
</map></center>

Rellena el menú siguiendo las instrucciones citadas anteriormente y guarda el gadget para terminar.

Menu simple con efecto hover y subm

Tanto los colores de fondo del menú como el color del texto o el borde puede editarse, logrando así que conjunte sin problemas con cualquier plantilla.

Diseño>Edición de HTML>expandimos artilugios

Localiza la etiqueta </head> y añade estas líneas justo antes:

<style type='text/css'>
/* Color texto */
#blcnMenujteAcord ul li a{color:#000000;}
/* Color fondo principal */
#blcnMenujteAcord{background:#d2b583;}
/* Color fondo al pasar el cursor */
#blcnMenujteAcord ul li a:hover{background:#a5834a;}
/* Color del borde (debe incluirse dos veces) */
#blcnMenujteAcord ul li {border-bottom: 1px solid #a5834a;}
#blcnMenujteAcord{border:1px solid #a5834a;}
</style>
<link href='https://sites.google.com/site/estoesunejemplodeprojecto/archivadorcanciones/blcnAcordJteMenu.css' rel='stylesheet' type='text/css'/>

En el propio código se indican las funciones de cada atributo css.

Recuerda que para modificar el color debe reemplazarse su código (por ejemplo #d2b583) por uno de la tabla de colores.

Para personalizar el estilo de borde, conviene leer esta entrada.

Guarda la plantilla una vez hayas finalizado la edición.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<div id="blcnMenujteAcord">
<ul>
<li><a href="#">Pestaña 1</a></li>

<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Pestaña 2.1 </a></li>
<li><a href="#">Pestaña 2.2 </a></li>
<li><a href="#">Pestaña 2.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Pestaña 3.1 </a></li>
<li><a href="#">Pestaña 3.2 </a></li>
<li><a href="#">Pestaña 3.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a>
<ul>
<li><a href="#">Pestaña 4.1 </a></li>
<li><a href="#">Pestaña 4.2 </a></li>
<li><a href="#">Pestaña 4.3 </a></li>
</ul>
</li>
</ul>
</div>

Sustituye en cada caso Pestaña X por el título de la pestaña que actuará como enlace para desplegar las sub-pestañas (Pestaña 1.1, Pestaña 1.2, etc).

La línea resaltada en color verde pertenece a la primera pestaña del menú, que a excepción de las otras, no despliega sub-pestañas (por tanto contiene un enlace).

La dirección web a la que conducirá cada pestaña debe introducirse en donde aparecen las almohadillas (#).

Para agregar más Pestañas 'generales', que no despliegan contenido, utiliza lo siguiente:

<li><a href="#">Pestaña 1</a></li>

Recuerda introducirlo siempre antes del cierre </ul>.

Si deseas aumentar la lista de sub-pestañas, utiliza líneas como esta:

<li><a href="#">Pestaña 2.2 </a></li>

Insértalas en el mismo grupo, antes del cierre </ul>.

Guarda el gadget una vez hayas terminado.