martes, octubre 21, 2008

Crear una barra de navegación

Después de mucho tiempo me he decidido a introducir nuevas modificaciones en mi blog y como es habitual, cada cambio que hago os lo cuento. Ahora me he decidio por colocar una barra de navegación con un menú para que sirva de guía a los usuarios del blog o para dirigirlos a los sitios que el autor del blog, en este caso yo, le interese más.

1.- Empezamos creando dos nuevas "variables" que utilizaremos más adelante para dar color al texto de los menús y al fondo, así desde la pestaña "Fuentes y colores" podremos modificar su color. Se colocan debajo de las demás "variables":

<Variable name="colormenu" description="Menu Color"
type="color" default="#FFFFFF" value="#ffffff">
<Variable name="colorbgmenu" description="Menu bg Color"
type="color" default="#FFFFFF" value="#B10245">

2.- Diseñamos la barra adaptándola a la configuración de nuesto blog y al lugar en que queremos situarla (todo el ancho del blog (body) o sólo en la parte principal del blog (main); yo optaré por esta segunda opción. Estos parámetros podemos colocarlos en cualquier lugar del código HTLM entre <head> y <:/head>, así que lo pondremos después de "description":


/*-- (Menú) --*/

#nav {
clear:both;
margin:1px auto 1px auto;
width: 966px;
height:30px;
background: url(http://xosse.dorrio.googlepages.com/fnd_marc_prev2.GIF) repeat-x;
overflow:hidden;
}

#nav_l {
float:left;
width:966px;
margin:0px; padding:0px;
overflow:hidden;
height:30px;
}

.menu {
float:left;
margin:5px 1px;
padding:3px;
width: 400px;
}

.menu li {
display: inline;
list-style: none;
margin:0;
padding:0;
}

.menu ul, .menu ol {
display: inline;
list-style: none;
margin:0;
padding:0 10px 0 0;
}

.menu a, .menu a:visited {
color: $colormenu;
font-weight: bold;
margin:0;
padding: 3px 10px 3px 10px;
text-decoration: none;
}

.menu a:hover {
background: $colorbgmenu;
text-decoration: none;
font-weight: bold;
border:1px solid #fff;
}

#subscribe {
float: right;
width:192px;
height:32px;
margin:4px 4px 3px 4px;
}

.rss {
float:left;
margin:7px 5px 5px 0px;
width:500px;
}

.rss ul {
margin: 0; padding: 0 2px;
}

.rss li {
background: url(http://bp2.blogger.com/_Zuzii37VUO4/R2iVYyjZEeI/AAAAAAAACew/
TXSgAsWEBLA/s1600/rss.gif) no-repeat 0 3px;
margin: 0 2px 0 0;
padding: 3px 0 3px 20px;
list-style: none;
font-size: 12px;
color:$colormenu;
display: inline;
font-weight: bold;
}

.rss li a {
font-size: 12px;
color:~$colormenu;
}

En negrilla van algunos de los parámetros quepodeis modificar a vuestro gusto (todos son modificables pero estos prsentan menos problemas)

3.- Para finalizar introduciremos el siguiente código en el blog y lo haremos en algún lugar entre <body> y </body>. Si queremos que ocupe todo el cuerpo lo pondremos al inicio; para que ocupe sólo la parte principal lo haremos en 'main'. Como mi barra irá debajo del título, expando la "plantilla de artilugios" y pego el código debajo del widget 'title':

<!-- menu -->
<div id='nav'>
<div id='nav_l'>
<div class='menu'><ul>
<b><li class='Inicio'><a alt='Inicio' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li></b>
</ul></div>
<!-- menu -->

<div class='rss'><ul>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Post</a> (RSS)</li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comentarios</a> (RSS)</li>
</ul>
</div>
</div><!-- nav_l -->
</div>

15 comentarios:

Mariana Gonzales dijo...

Si estan interesados en hacer intercambio de enlaces (tecnologia, informatica, relacionados)contactame en link.exchange.mariana@gmail.com

JLO dijo...

auxilio!!!!!!!!!!!!

en mi blog me sale esto, por ello no puedo cambiar de lugar las cosas q tengo en el sidebar...

o ver vistas previas, etc... dice asi:

Por favor, corrige el siguiente error y envía la plantilla de nuevo.
La plantilla no es válida porque la etiqueta "b:section" aparece dentro de la etiqueta "head".


q cosas tengo q correr de lugar? hay muchos lados donde tengo q dice "b:section"


please...



greacias...

xOsse dijo...

Eso es que has copiado algún artilugio (o elemento) entre head y head. Los elementos van siempre entre body y body, dentro de main o de alguna sidebar. Lo mejor es mover los elementos desde la pestaña "elementos de la página" y no desde el código HTLM

YannyRamz .- dijo...

Fui a parar a tu otro blog sin entender mucho, pero algo (creooo); leyendo ensayos y demas, pero no pude entender el titutlo del libro d G. Marquez.
Pase a decirte que no te extendiste, y gracias por viistar.

Emiliano dijo...

Hola!!! tienes un blog muy interesante, me gustaria que te hagas seguidor del mio!! puede ser??
www.super-coches.blogspot.com
saludos
Emi

xOsse dijo...

Hecho!

Host1plus dijo...

Queda muy bien! Y lo mejor es que es tableless :)

Martin Oraison dijo...

hola, me funciona todo joya pero no puedo direccionar los botones hacia mi pagina como puedo hacer

mOendo dijo...

Debes hacerlo manualmente. En la parte del código que está en negrilla pones el nombre de la pagina, primero, y, luego, la dirección.

Los Palitos dijo...

Hola, quiero saber si es posible usar los tags de las entradas como los links del menu, es decir poner el menu de tags como menu principal. Saludos desde
www.BlogeadorSolar.com

yodarud dijo...

http://viajetanger.blogspot.com/

georgi f.d. dijo...

la informacion es muy interesante.
gracias.
http://leedecideactua.blogspot.com/

yeah778 dijo...

como pusiste la imagen para el explorador ocea la imagen que se ve en la cavecilla del explorador

BellaBlack dijo...

Hola buenas!!
Verás, tengo una dudita...soy novata en esto de los blogs y aunque tengo lo de expandir plantilla de artilugios y todo eso, no hay manera de encontrar nada de variables...¿donde se ponen?
Espero que me puedas responder...y muchas gracias por tu tiempo!

Sergio Glez dijo...

Disculpa, soy nuevo en esto y me perdí desde el principio de la entrada. No se que hacer en el primer paso.
Si, soy un poco torpe jeje
Si me pudieras explicar un poco "para tontos" como colocar la barra de navegación en blogger te lo agradecería muchísimo.
Perdona por las molestias ;)