data:newerPageTitle data:olderPageTitle data:homeMsg

domingo, 23 de marzo de 2008
16:51:00

Por cada comentario que haces, Dios salva un gatito

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


*****

0 comentarios:

Haznos saber tu opinión

Todo comentario es bien recibido. Pero debes de tener en consideración los siguientes puntos:
1. No se permitirán insultos.
2. No se permitirá comentarios únicamente con publicidad. En todo caso te sugiero enviar un mensaje privado para ver el tema.
3. No se permitirá ningún tipo de ataque, agresión ni apologías de ningún tipo que inciten a la violencia o reacciones violentas. Se puede criticar y entablar debate sin necesidad de agredir a nadie.
4. No se permitirá ningún tipo de discriminación, segregación ni racismo.

Todos los comentarios serán sujetos a moderación, así que por favor les pido un poco de paciencia. Muchas gracias por comentar en este blog.



Coméntalo en Facebook

data:newerPageTitle data:olderPageTitle data:homeMsg

Publicados en esta categoría...

Suscribete a De Copy and Paste