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 .

      Artículos recomendados:

      Gracias por compartir tu comentario y hacernos saber tu opinión.