23 enero 2011

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 lucirá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

DEMOSTRACION

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, ubicate 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 lucen rectos en IE.

Bienvenidas sugerencias y/o comentarios :)

Nota: Abril/11/2011. Debido al cambio reciente de plantilla, perdí los estilos de los botones de muestra en la entrada, los puedo agregar, pero ahí en la DEMOSTRACION los pueden ver. Me disculpo por cualquier inconveniente.

Referencias w3schools .

Por: Karla Castañeda en 1/23/2011 Etiquetas:Menús,Tutoriales

Aviso: ¡Todos los comentarios publicados desde el 2013 se han perdido!. Ésto debido a que Google ha eliminado el sistema de comentarios de Google+. Lamentamos enormemente este hecho, pues se ha perdido toda la participación y/o retroalimentación en las entradas desde dicho año.