lunes, 10 de junio de 2013

Dar Estilo al Pagelist de Paginas Estaticas De Blogger

Desde hace unos días Blogger ya hizo oficial la opción de crear páginas estáticas en Blogger. Esto es que podemos crear páginas que no se mostrarán junto con las entradas sino que se podrán ver sólo cuando se dé click al enlace de dicha página; así que ya podemos prescindir del hack de ocultar entradas.

Crear una página es muy sencillo, sólo entra en Páginas | Página nueva | Página en blanco.
Redacta el contenido y publícala.

¿Cómo podemos ver el contenido de estas páginas?
Blogger nos da tres opciones, una es usando una Pestañas principales (debajo de la cabecera), Enlaces laterales (en la sidebar); o No mostrar, esta última es sin gadget, sólo nos da la URL de la página para agregarla donde tú elijas.

Quienes hayan escogido la primera o segunda opción verán que el menú de las páginas es extremadamente sencillo y sin chiste.


Pero podemos personalizarlo para darle "otra cara" y hacer que parezca menú y no una simple lista de enlaces.
Para hacerlo sólo hay que agregar unos estilos en la plantilla, los estilos son los mismos que usaríamos para un menú simple, ya que el gadget de Páginas que nos da Blogger no es otra cosa mas que una lista de enlaces.

Para personalizar este gadget entra en Plantilla | Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

    /* Menú de páginas
    ----------------------------------------------- */
    #PageList1 {
    width: 100%;
    border: 1px solid #625e00; /* Color del borde del menú */
    background-color: #E0ECF8; /* Color de fondo */
    }
    #PageList1 ul li a {
    color: #000; /* Color de los enlaces */
    text-decoration: none;
    font-weight: bold;
    padding-right: 20px;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj627akMGf01wIQYvupL5oodm3qCndvH3amsm3L1QzHxs-pu7s35F8OkAFhaJwYJVsejvYDzDWdJdElcA-N3cqOewy37p8gh6Gdt4tbW5lfDDxZjOPAm05BiyxwPVyWtpG2PKf8XYv5OI0/s320/vertical.gif) center right no-repeat;
    }
    #PageList1 ul li a:hover {
    color: #ccc; /* Color del texto al pasar el mouse */
    position: relative;
    left: 1px;
    top: 1px;
    }

He puesto en color verde las anotaciones para que lo personalicen a su gusto. Por supuesto pueden agregar más, como una imagen de fondo, otro tipo de letras, etc.
Sé que mucho pensarán -¿de qué me sirve ese menú si no puedo tener otros enlaces que no sean páginas estáticas?
Pues adicionalmente a lo que acabamos de hacer también podemos editar el gadget para mostrar otros enlaces que no sean las páginas estáticas.

Para hacerlo hay que entrar a Páginas | Página nueva | Dirección web. Ahí pon donde se indica la URL del enlace y el título del enlace.

También podemos cambiar el orden de las pestañas, lo hacemos también desde la sección Páginas, sólo arrastralas para cambiarlas de lugar.

3 comentarios:

  1. como se hace para que quede equidistante de la cabecera, es decir, que el espacio que sobra a cada lado del menu sea el mismo en comparacion con la cabecera?

    ResponderEliminar
  2. Yo también me hago la misma pregunta que el usuario anterior. Necesito una respuesta a la mayor brevedad posible. Gracias.

    ResponderEliminar
  3. Este es el copia y pega más insultante que he visto en todo el mundo blogger.
    No sé quién eres, ni me interesa, pero lo que has hecho aquí es caer muy bajo y sin dar créditos.
    http://www.ciudadblogger.com/2010/02/personalizar-el-gadget-de-paginas.html

    ResponderEliminar