domingo, 23 de marzo de 2008

Añadir un menú-bar al blog

Es un hack de Beautiful Beta, muy fácil de implementar en el blog. En solo dos pasos, tendremos una barra para menú sobre la cabecera del blog. Pensad que estas explicaciones son para la plantilla Mínima de Blogger, si estáis usando otra, pudiera ser o no, que la colocación de los códigos fuese distinta...


[1] Vamos al html de nuestra plantilla y buscamos esto:

<div id='header-wrapper'>

Justo a continuación añadimos este código:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>


En el ejemplo se supone que ya tienes un elemento "Lista" añadido, de ahí el id='LinkList2', si se da el caso de que ya tenemos varios elemento "Lista" añadidos hemos de saber "cual toca" para cambiar su id. Para no complicarnos demasiado, lo mejor es poner en el id un número elevado:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList50' locked='true' title='Menubar' type='LinkList'/>
</b:section>


[2] En el CSS de la plantilla añadimos el código para nuestro menubar, si tenemos alguna duda de donde situar el código, lo ponemos antes de ]]></b:skin>:


#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: #003399;
}
#menubar a:hover {
background-color: #CC3300;
}


Cambiamos los colores de los links a nuestro gusto.
Vamos a plantilla y veremos el nuevo elemento menubar sobre la cabecera, pinchamos en editar y vamos completando los campos como cuando añadimos un nuevo elemento "lista".
Podéis ver como queda en Beautiful Beta, ellos lo tienen sobre la cabecera, pero si lo queremos justo debajo de nuestra cabecera (también queda muy bien), ponemos el primer código justo después de esto :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nbgeyhtuytk (cabecera)' type='Header'/>
</b:section>

Fuente : Añadir un menú-bar al blog

No hay comentarios:

Publicar un comentario

AVISO:
Muchas gracias por considerar dejar un comentario. Te pido por favor que tengas en cuenta las siguientes pautas:
1. Evita usar lenguaje prosaico u ofensivo, y mantener siempre el respeto por todos.
2. Respeta las opiniones de los demás y no cometas el error de atacarlos de manera insultante o prosaica.
3. Si no estas de acuerdo con el tema publicado, ambos sabemos que hay forma de realizar una crítica sin ofender ni agredir.
4. También queda prohibida los enlaces de promoción o publicidad descarada.
5. Finalmente te pido que no utilices abreviaturas en tus respuestas para poder mantener una armonía en la lectura de los mensajes y una mejor comprensión de la lectura.

Y como muestra de mi gratitud por tu visita y comentario, si tienes sitio web o blog y has ingresado ese dato u OpenID, agregaré tu web o blog en mi sección Blogs de amistades y/o que me gusta visitar seguido.

En caso contrario tu comentario podría ser eliminado. Aprecio mucho que consideres esta petición de mi parte. Muchas gracias por tu comprensión.

Nota: solo los miembros de este blog pueden publicar comentarios.

El pianista que tocó y alguien escuchó

Una marmota en el barrio de Lima

Historias de una cocina

El cine que compartí