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>


¡Gracias por tus aportes Eulalia!

0 comentarios:

Publicar un comentario