Menú vertical

Hola que tal! Nuevamente volviendo de a poco.
Muchas gracias por la paciencia.
Comienzo a cumplir con los pedidos.
En este caso un menú vertical muy bonito y fácil de configurar.
Primero entras a edición HTML y en la plantilla buscas ]]></b:skin> y antes pegas lo siguiente:

/* menu vertical
----------------------------------------------- */
#borderlinks a{
padding-left: 4px;
display: block;
font-size: 14px; /* tamaño de texto */
text-transform: uppercase; /* Hacer que esté siempre en mayuscula */
width: 180px; /* tamaño de ancho */
color: black;
text-decoration: none;
border-left: 4px solid #FFD600; /* color de borde */
border-bottom: 1px solid #FFD600; /* color de linea inferior */
}

#borderlinks a:hover{
border-left: 3px solid #FF0000; /* color de linea al tocar el menu */
background-color: #FFD600; /* color de fondo cuando tocas el link */
color: #2A211A; /* color de letra seleccionada */
}

/* todo esto si querés lo borras */

►Como ves se puede cambiar los colores.
Guardas plantilla y vas a elementos de página y abris añadir un elemento de página. Aca dentro elegí HTML/Javascript y pegas el menú:

<div id="borderlinks">
<a href="http://webjcp.blogspot.com/">Enlace 1</a>
<a href="http://webjcp.blogspot.com/">Enlace 2</a>
<a href="http://webjcp.blogspot.com/">Enlace 3</a>
<a href="http://webjcp.blogspot.com/">Enlace 4</a>
<a href="http://webjcp.blogspot.com/">Enlace 5</a>
<a href="http://webjcp.blogspot.com/">Enlace 6</a>
</div>

►Resultado:

►Demo: Mira el menú en [Acción]
Buena suerte!

Seguí leyendo

Cerrar

Menú horizontal + multiples enlaces II

Ver en funcionamiento: [ACA]

Estimadas/os vuelvo con un menú con varios link para agregarle. Sigan los pasos que hay a continuación en detalles.
En el primer código verán, dentro del mismo, como está aclarado para cambiar el color. Lo pegan en la plantilla / edición HTML, antes de ]]></b:skin>
El segundo código va un poquito más abajo, en la plantilla, antes de </head>. Luego guardan los cambios y van a elementos de página.
Cuando van a subir el menú deben prestarle atención al armarlo.
Pero les aseguro que no es nada difícil.

ANTES DE: ]]></b:skin>

Código 1 [+/-]

/* MENU = Horizontal */

ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px;
list-style: none;
height: 24px;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 160px;
float: left;
display: block !important;
display: inline;
}

/* Configurar Menu */
ul#navmenu a {
border: 1px solid #800000;/*color de bordes*/
border-right-color: #800000;/*color de bordes*/
border-bottom-color: #800000;/*color de bordes*/
padding: 0 6px;
float: none !important; /*Opera*/
float: left; /*IE*/
display: block;
background: #FFCC00;/*color de fondo del menu*/
color: #800000;/*color de letra del menu*/
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Configurar seleccion */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #800000;/*color al seleccionar menu*/
color: #FFCC00;
}

/* configura al expandir 1*/
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #FFCC00;
color: #800000;
}

/* selección al expandir 1*/
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #800000;
color: #FFCC00;
}

/* configura al expandir 2*/
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #FFCC00;
color: #800000;
}
/* selección al expandir 2*/
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #800000;
color: #FFCC00;
}

/* configura al expandir 3*/
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #FFCC00;
color: #800000;
}

/* selección al expandir 3*/
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #800000;
color: #FFCC00;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* aca no toqués nada, es para expandir */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}

ANTES DE: </head>

<script language='JavaScript' src='http://ar.geocities.com/blogdecesar/dhtml.js' type='text/JavaScript'/>

Y en añadir:
Clic para ver detalle:[ACA]

<ul id="navmenu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Enlace 1 ▼</a>
<ul>
<li><a href="#">Link 1 ►</a>
<ul>
<li><a href="#">Link a</a></li>
<li><a href="#">Link b</a></li>
<li><a href="#">Link c</a></li>
<li><a href="#">Link d</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Enlace 2 ▼</a>
<ul>
<li><a href="#">Link 1 ►</a>
<ul>
<li><a href="#">Link a</a></li>
<li><a href="#">Link b</a></li>
<li><a href="#">Link c</a></li>
<li><a href="#">Link d</a></li>
<li><a href="#">Link e</a></li>
</ul>
</li>
<li><a href="#">Link 2 ►</a>
<ul>
<li><a href="#">Link a</a></li>
<li><a href="#">Link b</a></li>
<li><a href="#">Link c</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
</ul>

Seguí leyendo

Cerrar

Menú vertical con imagen de fondo

Seguimos con ésta lluvia de menús. Ya voy a poner otras utilidades, pero me parece que, a la hora de expandir nuestro blog, siempre está bueno que tengamos a mano este tipo de cosas.
En este caso, como muestra, te puse mis etiquetas para que veas que también sirve para usarlas en ellas.
El primer código lo ubicas arriba de ]]></b:skin> y el segundo, donde te parezca, desde añadir un elementos de página. También lo podes poner en una entrada como te lo muestro aca abajo.

Mira:

• Accesorios
• Plantillas
• Trucos
• Script
• Menús

Todo tuyo:

Este va antes de ]]></b:skin> en tu plantilla

Código 1 [+/-]

/* Menu nav
----------------------------------------------- */

#nav,#nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
width: 140px;
height: 27px;
background: url(http://blogdecesar.googlepages.com/menunav.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}

#nav a:hover {
background-position: 0 -27px;
color: #900;
text-decoration: none;
}

Vas a ver esto:
background: url(http://blogdecesar.googlepages.com/menunav.gif) no-repeat;
Esta es la imagen de fondo. Si la cambias para adaptarlo a tus colores tene en cuenta el tamaño.

Y desde añadir un elemento de página abrís HTML/Javascript y pegas esto:

<ul id="nav">
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
</ul>

Aca # va el vinculo

Buena suerte!!!

Seguí leyendo

Cerrar

Menú horizontal con multiples enlaces

Pincha en la imagen para verlo en acción:

Te va a gustar!. Es un menú muy simpático con múltiples enlaces. Ya viene configurado de color blanco, más adelante puedo ir agregando otros colores del mismo menú.
Primero tenes que buscar <head> y pegar este código:

Código 1 [+/-]

<link href='http://ar.geocities.com/blogdecesar/css.css' rel='stylesheet'/>
<!--[if IE]>
<link rel="stylesheet" href="http://ar.geocities.com/blogdecesar/hack.css" />
<script type="text/javascript">

window.mlrunShim = true;
</script>
<![endif]-->
<script src='http://ar.geocities.com/blogdecesar/js.js' type='text/javascript'>
</script>

Guardas plantilla y vas elemento de página y en añadir abri HTML/Javascript y pega:

Código 2 [+/-]

<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
<li><a href="#">Enlace</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>

</ul>
</li><li><a href="#">Enlace</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>

</ul>
</li><li><a href="#">Enlace</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>

</ul>
</li><li><a href="#">Enlace</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul></li>
<li><a href="#">Herramientas</a>
<ul>
<li><a href="http://www.youtube.com/">Youtube</a></li>
<li><a href="http://tinypic.com/">Fotos</a></li>
<li><a href="http://www.ademails.com/">Contador</a></li>
<li><a href="http://www.clocklink.com/">Relojes</a></li>
</ul>
</li>

</ul>
</div>
</center>

Luego lo pones donde vos quieras arrastrándolo con el puntero.

Configurar:
Te dejo armado un enlace con los link para que veas como se prepara.

<li><a href="#">Herramientas</a>
<ul>
<li><a href="http://www.youtube.com/">Youtube</a></li>
<li><a href="http://tinypic.com/">Fotos</a></li>
<li><a href="http://www.ademails.com/">Contador</a></li>
<li><a href="http://www.clocklink.com/">Relojes</a></li>
</ul>
</li>

[+/-]Actualizado:

Otra posibilidad es que pegues el segundo código en la plantilla directamente.
Va aca:

Seguí leyendo

Cerrar

Menú horizontal IV

Pincha en la imagen para verlo en acción:

Tenes una nueva entrega de un menú horizontal. Este es parecido al negro pero sin imagenes y con posibilidad de que adaptés los colores a gusto.
Ya sabes. El primer código va después de <head> en la plantilla en "edición HTML" y el segúndo lo subis desde "añadir un elemento de página y HTML/Javascript.


[+/-]Abrir código 1

<style type='text/css'>

/*Pegar después de HEAD */

.invertedshiftdown2{
padding: 0;
width: 100%;
border-top: 5px solid #8B0000; /*ancho, tipo y color de linea que va arriba*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown2 ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}

.invertedshiftdown2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;/*transformas las letras en mayúscula, si no te gusta pone none*/
}

.invertedshiftdown2 a{
float: left;
display: block;
font: bold 12px Arial;/*tipo de letra*/
color: #8B0000;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 5px 10px;
background-color: #FFD401; /*color del menú antes de seleccionar*/
border-bottom: 8px solid white;
}

.invertedshiftdown2 a:hover{
background-color: #8B0000; /*color del menu al seleccionar*/
padding-top: 10px;
padding-bottom: 0; /*podes agrandar la selección */
border-bottom-color: #8B0000; /*color del menú al seleccionar, parte de abajo*/
color: #FFFF99;/*color de letra al seleccionar*/
}

.invertedshiftdown2 .current a{
background-color: #8B0000; /*color fijo de inicio*/
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #8B0000; /*color fijo de inicio, parte de abajo*/
color: #FFFF99;/*color fijo de letra de INICIO*/
}

</style>

Mira bien adentro que te digo como se pueden cambiar los colores.
Ahora usa el segundo código:

[+/-]Abrir código 2


<div class="invertedshiftdown2">
<ul>
<li class="current"><a href="http://webjcp.blogspot.com/" title="Inicio">Inicio</a></li>
<li><a href="http://webjcp.blogspot.com/" title="Fotos">Fotos</a></li>
<li><a href="http://webjcp.blogspot.com/" title="Videos">Videos</a></li>
<li><a href="http://webjcp.blogspot.com/" title="Opinión">Opinión</a></li>
<li><a href="http://webjcp.blogspot.com/" title="Saludos">Saludos</a></li>
<li><a href="http://webjcp.blogspot.com/" title="Amigos">Amigos</a></li>
<li><a href="http://webjcp.blogspot.com/" title="gmail">Contacto</a></li>
</ul></div>


Seguí leyendo

Cerrar

Menú script con muchos enlaces

Pincha en la imagen para verlo en acción:

Mira que práctico y fácil de subir al blog. En el código vas a ver que está la manera de editarlo. Para eso lo podes hacer en linea usando el [editor] ya que no necesita ningún agregado a la plantilla.
Una vez que lo armaste como a vos te gusta, con los enlaces y colores para que quede bien en tu blog, copias y pegas desde añadir elemento de página / HTML/Javascript y lo pones en su lugar.
El código:

<!--Aca editas el menú - a medida que pongas más vas cambiando esto showit(?) -->

| <a onmouseover="showit(0)" href="http://webjcp.blogspot.com/">Menú 1</a> | <a onmouseover="showit(1)" href="http://webjcp.blogspot.com/">Menú 2</a> | <a onmouseover="showit(2)" href="http://webjcp.blogspot.com/">Menú 3</a> | <a onmouseover="showit(3)" href="http://webjcp.blogspot.com/">Menú 4</a> |<br/>

<!-- Aca se edita el largo y ancho - color de letra - color de fondo --->

<ilayer width="400" height="22" name="dep1" bgcolor="#800000">
<layer width="400" name="dep2" height="22">
</layer>
</ilayer>
<div id="describe" style="color:#000000;background-color:#FFD401;width:400px;height:22px" onmouseover="clear_delayhide()" onmouseout="resetit(event)"></div>


<script language="JavaScript1.2">


var submenu=new Array()

<!--Aca editas los enlaces - el submenu [?] debe coincidir con el menú showit(?) -->

submenu[0]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 1</a> | <a href="http://webjcp.blogspot.com/">Enlace 2</a> | <a href="http://webjcp.blogspot.com/">Enlace 3</a> | <a href="http://webjcp.blogspot.com/">Enlace 4</a></font>'

submenu[1]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 5</a> | <a href="http://webjcp.blogspot.com/">Enlace 6</a> | <a href="http://webjcp.blogspot.com/">Enlace 7</a> | <a href="http://webjcp.blogspot.com/">Enlace 8</a></font>'

submenu[2]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 9</a> | <a href="http://webjcp.blogspot.com/">Enlace 10</a> | <a href="http://webjcp.blogspot.com/">Enlace 11</a> | <a href="http://webjcp.blogspot.com/">Enlace 12</a></font>'

submenu[3]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 13</a> | <a href="http://webjcp.blogspot.com/">Enlace 14</a> | <a href="http://webjcp.blogspot.com/">Enlace 15</a> | <a href="http://webjcp.blogspot.com/">Enlace 16</a></font>'


//aca editas el tiempo que los enlaces están a la vista
var delay_hide=500

/////No tocar desde aca -saca los dedos ;)

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

Seguí leyendo

Cerrar

Menú horizontal negro con forma..

Pincha en la imagen para verlo:

Aca te dejo otro modelo de menú horizontal.
Te va a gustar porque, a diferencia de los otros, tiene un poco más de formas.
Para usarlo primero tenes que pegar en la plantilla, después de <head> el primer código que te dejo:


[+/-]Abrir código 1

<style type="text/css">

/*Ponelo después de HEAD */

#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}

#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background-color: black;
background: black url(http://webjcp.googlepages.com/leftround.gif) bottom left no-repeat;

/*optional left round corner*/
}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom

margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu ul li{
display: inline;
}


#pointermenu ul li a{
float: left;
color: white;
font-weight: bold;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(http://webjcp.googlepages.com/pointer.gif) bottom center no-repeat;
}

#pointermenu ul li a:visited{
color: white;
}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}

#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url(http://webjcp.googlepages.com/rightround.gif) bottom right no-repeat;

/*optional right round corner*/
}

</style>

En está parte podes configurar los colores y formas.
Guardas plantilla y vas a elementos de página.
Desde añadir buscas HTML/Javascript y pegas los que sigue:

[+/-]Abrir código 2

<div id="pointermenu">
<ul>
<li><a id="selected" href="http://........../">titulo</a></li>
<li><a href="http://........../">título</a></li>
<li><a href="http://........../">título</a></li>
<li><a href="http://........../">título</a></li>
<li><a href="http://........../">título</a></li>
<li><a href="http://........../">título</a></li>
<li><a href="http://........../">título</a></li>
<li><a id="rightcorner" href="#"> </a></li>
</ul>
</div>
<br style="clear: left"/>

Te conviene no poner títulos muy largos si usas varios vínculos.
Buena suerte!!!

Actualización 28/08/2007:


Como cambiarle el color:
Este menú viene con imágenes de fondo pre-establecidas.
Los bordes negros de los costados y el triangulo blanco que está en el medio.
Entonces para cambiarle el color y que quede con el mismo diseño tenes que cambiar esas imagenes por otras de otro color. Tenes que tener un programa de diseño con el que puedas armar esas imágenes acorde a tus colores.

Pero si no te importa que pierda algo del diseño y le queres adaptar el color busca y cambia el color estas partes en el primer código:

background-color: black;
background: black url(http://webjcp.googlepages.com/leftround.gif) bottom left no-repeat;
Este es el borde izquierdo con forma de curva (negro)
color: white;
background: url(http://webjcp.googlepages.com/pointer.gif) bottom center no-repeat;
Este es el triangulo blanco
color: white;
background-color: darkred;
Este es el color rojo cuando seleccionas el vinculo
background: url(http://webjcp.googlepages.com/rightround.gif) bottom right no-repeat;
Este es el borde derecho

Donde dice "url" es la dirección de la imagen, reemplaza por "color" [background-color:]

Seguí leyendo

Cerrar

Menú horizontal !

Podes verlo haciendo clic en la imagen

Este es otro menú para que puedas poner tus link en la parte de arriba de tu blog.
Podes modificar los colores a tu gusto.
Fue probado en distintos navegadores y funciona sin problemas.
Se hace en dos partes. Una va en la plantilla y la otra, con los enlaces, la subis en "añadir un elemento de página" y la pones abajo de la cabecera.
Paso a paso:

1) Ubicas <head> en tu plantilla y debajo pegas lo siguiente:


[+/-]Abrir código 1





<style type='text/css'>
#dolphincontainer{position:relative;height:55px;color:#E0E0E0;background:#2C363A;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}

#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#3D4D51 url() repeat-x bottom left;
padding:0 0 0 20px;}

#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}

#dolphinnav ul li{display:block;float:left;margin:0 1px;}

#dolphinnav ul li a{display:block;float:left;color:#CCFF00;text-decoration:none;
padding:0 0 0 20px;height:33px;}

#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}

#dolphinnav ul li a:hover{color:#FFFF99;
background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}

#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}

#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#B7F33B;
background:#696969 url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}

#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#696969 url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}

</style>






Es aca donde podes cambiar los colores.

2) Luego de guardar vas a elementos de la página y abris añadir un elemento de página y pegas lo siguiente:



<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://...." class="current" title=""><span>Inicio</span></a></li>
<li><a href="" title="http://.."><span>Enlace 1</span></a></li>
<li><a href="" title="http://.."><span>Enlace 2</span></a></li>
<li><a href="" title="http://.."><span>Enlace 3</span></a></li>
<li><a href="" title="http://.."><span>Enlace 4</span></a></li>
</ul>
</div>
</div>



Podes agregar más link al menú. Mo te olvides de poner el enlace completo.

Seguí leyendo

Cerrar

Otro modelo de menú

• Inicio
• Enlace uno
• Enlace dos
• Enlace tres
• Enlace cuatro

1) Pegamos el siguiente código en la "hoja de estilos" de nuestra plantilla.


[+/-]Abrir código 1


/*- menu----------- */

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#navcontainer li { margin: 0 0 3px 0; }

#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #FFCC00;
background-image:

url(http://img478.imageshack.us/img478/1483/ama1yh2.jpg);
}

#navcontainer a:link, #navlist a:visited
{
color: #000000;
text-decoration: none;
}

#navcontainer a:hover
{
border: 1px solid #FFFF99;
background-color: #6C1F0D;
background-image:

url(http://img166.imageshack.us/img166/3333/nar2af6.jpg);
color: #FFFF99;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #FFFF99;
background-color: #6C1F0D;
background-image:

url(http://img166.imageshack.us/img166/3333/nar2af6.jpg);
color: #FFFF99;
}



2) Después ubicamos el menú


[+/-]Abrir código 2


<div id="navcontainer">
<ul id="navlist"><li id="active">
<a href="#" id="current">Inicio</a></li>
<li><a href="#">Enlace uno</a></li>
<li><a href="#">Enlace dos</a></li>
<li><a href="#">Enlace tres</a></li>
<li><a href="#">Enlace cuatro</a></li>
</ul>
</div>


Donde está [ # ] va la dirección completa del enlace.

Seguí leyendo

Cerrar

Menú horizontal muy vistoso !

Es el que uso en este blog. Se puede configurar, entre otras cosas, el color de fondo.

Pone este código después de <head> en la plantilla.


[+/-]Abrir código 1

<style type='text/css'>

#chromemenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

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

#chromemenu ul{
border: 3px double #DC143C;
width: 99%;
background-color: #FFD600; center
center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #000000;
padding: 5px;
margin: 10;
text-decoration: none;
border-right: 3px double #DC143C;
}

#chromemenu ul li a:hover{
background-color: #FFAD00; center
center repeat-x;
}

</style>

Una vez que lo pegaste guardar plantilla.
Despues va es siguiente código que lo agregas en "añadir un elemento de página"

[+/-]Abrir código 2

<div id="chromemenu">
<ul>
<li><a href="#">titulo 1</a></li>
<li><a href="#">titulo 2</a></li>
<li><a href="#">titulo 3</a></li>
<li><a href="#">titulo 4</a></li>
<li><a href="#">titulo 5</a></li>
<li><a href="#">titulo 6</a></li>
<li><a href="#">titulo 7</a></li>
</ul>
</div>


En "#" deberán poner dirección de enlace.

Seguí leyendo

Cerrar

Menú expandible !!!!

Como verán se puede hacer un menú expandible en forma muy sencilla.
La idea original la saque del blog donde nos enseña a hacer, en forma muy clara, el truco de "[+/-] ABRE-CIERRA"

• Link 1


• Link 2

Yo le puse imagen en vez de esos signos para que quede más simpático.

Después de <head> pegan este código:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Guardan Plantilla y luego van a "añadir elemento" y pegan el siguiente código:

<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://img340.imageshack.us/img340/4420/54074410lz1.gif"/></a><br/>

<ul id="video" class="texthidden">
<li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>
<li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://img230.imageshack.us/img230/4025/68368781hz1.gif"/></a><br/>

<ul id="musica" class="texthidden">
<li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li>
<li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('imagen')"><img border="0" src="http://img138.imageshack.us/img138/9530/51862521cf7.gif"/></a><br/>

<ul id="imagen" class="texthidden">
<li><a href="http://imageshack.us/" target="_blank">ImageShack</a></li>
<li><a href="http://tinypic.com/" target="_blank">Tinypic</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('contadores')"><img border="0" src="http://img337.imageshack.us/img337/443/43453470ow3.gif"/></a><br/>

<ul id="contadores" class="texthidden">
<li><a href="http://www.contadorwap.com" target="_blank">Contador Wap</a></li>
<li><a href="http://www.estadisticasgratis.com/index.php" target="_blank">Estadisticas</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('botones')"><img border="0" src="http://img406.imageshack.us/img406/1425/73940793gl3.gif"/></a><br/>

<ul id="botones" class="texthidden">
<li><a href="http://www.buttonator.com/" target="_blank">Butonar</a></li>
<li><a href="http://cooltext.com/" target="_blank">Cooltext</a></li></ul>

Como verán les dejo el menú armado tal cual lo puse en la barra lateral.
Asi que les va a ser fácil configurar a su gusto.
Solo tienen que cambiar títulos, que en este caso hay un botón y los vínculos.
Desde ya si hay que explicar algo más en detalle me dicen y lo vemos.

Seguí leyendo

Cerrar

Otro menú vertical !!!

Este menú es más práctico a mi entender.
Es transparente y se adapta al fondo de donde lo pongas.
Cuando buscan el link cambia de un color y además es muy fácil de agregar al blog.
Miralo:

clic en la imagen y lo ves en acción

Para agregarlo tenes que pegar el siguiente código después de <head>:
(en plantilla, edición HTML)



<style type='text/css'>

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 3px double #000000;
color: #000;
margin: 0px;
width:159px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 90%;
display: block;
border-bottom: 1px dashed #FEE300;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #FF9900;
}

</style>




Aca es donde poder configurar letra, colores y tamaño.
Y luego usas este para agregar los vinculos:



<div id="vertmenu">
<h1>MENÚ</h1>
<ul>
<li><a tabindex="1" href="#">Link 1</a></li>
<li><a tabindex="2" href="#">Link 2</a></li>
<li><a tabindex="3" href="#">Link 3</a></li>
<li><a tabindex="4" href="#">Link 4</a></li>
<li><a tabindex="5" href="#">Link 5</a></li>
<li><a tabindex="6" href="#">Link 6</a></li>
</ul>
</div>



Donde está # escribis la dirección, tene en cuenta que tiene que ir completa (http://..... ) y donde dice link escribi el nombre de la página.
Buena suerte

Seguí leyendo

Cerrar

Menú para tu blog

Este es un atractivo menú vertical para que puedas usar en tu blog.
Está bueno si tenes varias secciones, pero también podes darle otros usos.
No es difícil agregarlo al blog.
Con paciencia podes cambiarle los colores y el estilo.
Podes verlo en acción:



En el código te dejo los link que uso asi te podes orientar bien.
Código:

Está en dos partes. La primera la pegas en la plantilla debajo de <head>
Sobre este primer código es que podes cambiarle el color, tamaño, tipo de letra, etc.


<style type="text/css">

#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

</style>


Y a continuación te dejo lo que subis como menú al sidebar en:
añadir un elemento a la página e insertar HTML....


<div id="blueblock">
<ul>
<li><a href="http://www.clarin.com/">Clarín</a></li>
<li><a href="http://www.diariohoy.net/v9/digital.phtml">Hoy</a></li>
<li><a href="http://www.lanacion.com.ar/">La Nación</a></li>
<li><a href="http://www.pagina12.com.ar/diario/principal/index-2007-02-17.html"> Página 12</a></li>
<li><a href="http://www.ole.clarin.com/">Olé</a></li>
<li><a href="http://www.noticiasurbanas.com.ar/">Noticias Urbanas</a></li>

</ul>
</div>

Seguí leyendo

Cerrar