lunes, 23 de julio de 2007

.:Menu:.

Pues ya he regresado y les traigo aqui un menu padre que les puede gustar.

No lo he implementado en este blog por que me gustan mas estas pestañas pero lo pueden ver aqui.

Este menu es muy facil de implementar en cualquier blog, lo unico que tienes que hacer es colocar el sigueinte codigo en:

Plantilla----> Editar HTML---->y buscas <head> e inmediatamente despues colocas este codigo:

<style type='text/css'>

#hacktime-blogspot-commenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

#hacktime-blogspot-commenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: &quot;.";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}

#hacktime-blogspot-commenu ul{
border: 3px double #000;
width: 99%;
background-color: #FFF; center
center repeat-x;
padding: 8px 0;
margin: 0;
text-align: left; /*set value to &quot;right" for example to align menu to the left of page*/
}

#hacktime-blogspot-commenu ul li{
display: inline;
}

#hacktime-blogspot-commenu ul li a{
color: #000000;
padding: 9px;
margin: 10;
text-decoration: none;
border-right: 3px double #000;
}

#hacktime-blogspot-commenu ul li a:hover{
background-color: #B3B3B3; center
center repeat-x;
}

</style>
.
Luego guardass los cambios y te vas a Plantilla----> Agregar nuevo elemento, y agregas este otro codigo:

<div id="hacktime-blogspot-commenu">
<ul>
<li><a href="#">Aqui va el enlace 1</a></li>
<li><a href="#">Aqui va el enlace 2</a></li>
<li><a href="#">Aqui va el enlace 3</a></li>
<li><a href="#">Aqui va el enlace 4</a></li>
<li><a href="#">Aqui va el enlace 5</a></li>
</ul>
</div>
.
Solo tienes que cambiar las # por la url de la pagina que quieras y eso es todo, espero qu les guste este menu ya que me costo un poco de tiempo hacerlo. :)
.
Me pueden dejar un comentario si no les gusta el tamaño o los colores o diganme lo que no les gusto y lo tratare de cambiar. ;)


Escucha este escrito

6 Personas dejaron sus comentarios:

-M- comento sobre este post...

Hola!, gran hack este. No lo voy a usar en mi blog, pero ya he utilizado un par de tus recomendaciones y me ha ido muy bien. Muchas gracias y sigue así.
Saludos!

EnPro comento sobre este post...

hey muy bueno lo del menu, tengo unos dias visitando tu blog..esta bien niti2.

yo tambien tengo unos meses con esto de los Blog`s. :)

emigasei67 comento sobre este post...

Realmente muy bueno tu blog. Me gustan los consejos. Te puedo agregar a mi blog? http://emigasei67-elrastreador.blogspot.com/

Saludos.

ChimboteXtremo comento sobre este post...

Hola indicas agregar nuevo elemento, pero disculpa mi ignorancia q elemnto escogo para poner ese codigo espero atiendas mi consulta, ya q el menu se ve chevere y me gustaria tenerlo en mi blog, de antemano muchas gracias.

LUIS UCR comento sobre este post...

para chimboteextremo
no es ignorancia es falta de comprension
1.-seleccionas plantilla>>edicion de html buscas la etiqueta o codigo <HEAD> entonces DESPUES de <HEAD> insertas este codigo:
<style type='text/css'>

#hacktime-blogspot-commenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

#hacktime-blogspot-commenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: &quot;.";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}

#hacktime-blogspot-commenu ul{
border: 3px double #000;
width: 99%;
background-color: #FFF; center
center repeat-x;
padding: 8px 0;
margin: 0;
text-align: left; /*set value to &quot;right" for example to align menu to the left of page*/
}

#hacktime-blogspot-commenu ul li{
display: inline;
}

#hacktime-blogspot-commenu ul li a{
color: #000000;
padding: 9px;
margin: 10;
text-decoration: none;
border-right: 3px double #000;
}

#hacktime-blogspot-commenu ul li a:hover{
background-color: #B3B3B3; center
center repeat-x;
}

</style>

guardas los cambios.


Bueno ahora que insertaste el codigo
vas a añadir elemento de pagina despues seleccionas HTML/Javascript
y escribes este codigo:
<div id="hacktime-blogspot-commenu">
<ul>
<li><a href="#">Aqui va el enlace 1</a></li>
<li><a href="#">Aqui va el enlace 2</a></li>
<li><a href="#">Aqui va el enlace 3</a></li>
<li><a href="#">Aqui va el enlace 4</a></li>
<li><a href="#">Aqui va el enlace 5</a></li>
</ul>
</div>
Ahora ya nadamas inserta las direcciones como por ejemplo
<li><a href="menu.html">MENU</a>
ahora al dar click en este boton te iras directamente a
a la entrada. http://la direccion de tu blog.blogspot.com/2007/07/menu.html

LISTO eso es todo espero y lo hayas entendido sino pues contactame en mi BLOG

Rafael Pisoni comento sobre este post...

Hola!! muy bueno el hack! y todos los otros tambien! muy buena la pagina

dime.. podrias hacerlo que se vea como las pestañas (de las etiquetas)?

y otra cosa, como hago para que cuando paso el mouse por encima se despliegue otra lista?

saludos! y gracias por todo

Calendario de posts

Cargando...

 
ir arriba