Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Menú de pestañas SimpleBlue

A continuación te explicaré cómo incluir el menú de pestañas SimpleBlue en tu blog, puedes ver cómo será el resultado más abajo...

Si te gustó y quieres ponerlo en tu blog, sigue los pass que te mostraré a continuación. Ten en cuenta que una copia de seguridad de tu plantilla no viene mal, por si te equivocas en algo.

*Voy a enseñarte a ponerlo igual que el de la imágen, te enseñaré a cambiar el tamaño y la altura pero si quieres cambiar cualquier otra cosa y no sabes cómo hacerlo, puedes preguntarme por medio de un comentario o un correo.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y justo antes le pegas este código, que es el que representa todas las características del menú...
/* -------------------SimpleBlue------------------- */

#SimpleBlue {
height: 45px;
width: 680px;
border: 2px groove #151084;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7tlRObBf9G4kr4-5Ms6lfQ6bST7YGFXiQJOTEDUOhBOhKkzMKn1ksgBEEYrioF2MncXn9w-fqwGpIOPI6rB8H5Nz0C_S8l_0VWqRbnxMoa47X6gpaIrQCNsmkiGgbXZ2m2IfVn-TvK8/s1600-r/asul.bmp') no-repeat left top;
margin: 0 auto;
}

#SimpleBlue ul {
margin: 0;
padding: 10px 0px 0px 10px;
list-style: none;
line-height: normal;
}

#SimpleBlue li {
text-decoration: none;
float: left;
}

#menu a:hover, #menu .current_page_item a {
}

#SimpleBlue a {
text-decoration: none;
margin-right: 3px;
color: #0800d1;
border: none;
padding: 6px 20px 7px 20px;
display: block;
font-family: arial, Comic sans MS;
font-size: 15px;
font-weight: normal;
}

#SimpleBlue a:hover {
color: #ffffff;
background: #0800d1;
text-decoration: bold;
}

#SimpleBlue a:hover, #menu .current_page_item a {
}

/* --------------Final-SimpleBlue------------------- */

Para cambiarle el ancho, puedes hacerlo en el primer bloque, modificando el valor de la línea de with.

Para cambiarle la altura, puedes hacerlo en el primer bloque, modificando el valor de la línea de height.

Ahora Guarda cambios.

Diseño>añadir gadget (elemento de página)>html-javascript

Pegas este código:
<div id="SimpleBlue">
<ul>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
</ul>
</div>
Sustituye en cada caso URL DE TU PAGINA por la dirección (URL) de tu blog o web, por ejemplo: http://google.es/

Sustituye en cada caso TITULO por el titulo de la pagina, por ejemplo: Inicio

Recuerda que si quieres tener menos enlaces, simplemente tienes que eliminar una de estas líneas:
<li><a href="URL DE TU PAGINA">TITULO</a></li>

¡Guarda cambios y listo!

CARMEN dice...

Hola Jaime!!
Gracias por pasar por mi blog.
Me gsuta el tuyo, puedo aprender unas cuantas cosas, que me vendrán muy bien.

Ya seguiremos viéndonos.

besos

ViVy dice...

hola jaime!
primero gracias por la data.
aqui va mi duda: y si queremos cambiarle el color?, por ejemplo letras negras sobre fondo blanco.
gracias!

Unknown dice...

muy buen blog me a servido muchos de tus tutoriales para varias cosas del blog, por cierto coloque tu banner en mi blog, bueno saludos y ahi te vez.

Jaime Trujillo Escobedo dice...

Hola CARMEN! muchas gracias por pasarte por El Balcón :-D vuelve cuándo quieras :-D Un abrazo0!!

Jaime Trujillo Escobedo dice...

Hola ViVy! eso es fácil, pero mejor envíame tu pregunta por un correo, te lo explicaré más ´fácilmente y te será más cómodo de hacer que en un comentario :-)

Jaime Trujillo Escobedo dice...

Hola Ryuivan! cuánto me alegra que te sirviesen de ayuda los tutoriales :-D si necesitas cualquier tipo de ayuda, aquí estaré :-) un graaaaaaaaaaaan saludo y gracias por el banner! :-D

Viviana dice...

Gracias Javi!! ya lo habia esta checando el fin de semana. Mi pregunta es, en vez de poner

TITULOPuedo poner la URL del boton y la img del boton?

Tenkiusssssss

Jaime Trujillo Escobedo dice...

Viviana, claro que se puede, lo único que el icono debería ser transparente y de un tamaño específico (45px de altura como máximo).

Si consigues iconos con esas propiedades, simplemente añade esta línea en lugar de TITULO:

<img src="url de tu imagen"/>

Viviana dice...

Gracias Javier...

no, de transparente, nada... este es mi icono: http://i43.tinypic.com/15fjbl1.jpg

Jaime Trujillo Escobedo dice...

Viviana, ¡te refieres a poner ese cuadrito de fondo! eso se podría hacer pero me temo que habría que destruir este menú.

Mejor publico una entrada explicando otro menú para que puedas poner esa imágen de fondo =D

Me llamo Jaime, no Javier jejeje ☺ :)

Viviana dice...

tu madre pensando 9 meses tu nombre para yo cambiartelo en 1 segundo!!! jejeje perdon!

pues no... yo se q se puede hacer... el tema es "como" jajaja

sigo investigando besos!!!!!!!!!!

Jaime Trujillo Escobedo dice...

Viviana, jejeje no te preocupes ^_^ verás, hacerse se puede hacer lo único que adoptaría otra estructura... pero claro que se puede hacer, aquí te dejo el css:

/* -------------------SimpleBlue------------------- */

#SimpleBlue {
color: #ffffff;
height: 45px;
width: 680px;
margin: 0 auto;
}

#SimpleBlue ul {
margin: 0;
color: #ffffff;
padding: 10px 0px 0px 10px;
list-style: none;
line-height: normal;
}

#SimpleBlue li {
color: #ffffff;
margin-left: 0.6em;
background: url(http://i43.tinypic.com/15fjbl1.jpg)no-repeat;
text-decoration: none;
float: left;
}

#menu a:hover, #menu .current_page_item a {
}

#SimpleBlue a {
text-decoration: none;
margin-right: 3px;
color: #ffffff;
border: none;
padding: 6px 20px 7px 20px;
display: block;
font-family: arial, Comic sans MS;
font-size: 15px;
font-weight: normal;
}

#SimpleBlue a:hover {
color: #ffffff;
text-decoration: none;
}

#SimpleBlue a:hover, #menu .current_page_item a {
}

/* --------------Final-SimpleBlue------------------- */

Viviana dice...

Ahora mismo hago el intento... si me dices donde lo ubico.. o me baso en este post?

Viviana dice...

Y no es que quiera la imagen de fondo... quiero una linea de botones como el que pase... ay q torpe soy para explicartelo...

Jaime Trujillo Escobedo dice...

Viviana, sigue los mismos pasos de esta entrada pero en lugar de poner el CSS de arriba pon el del comentario ;-)

Laube Leal dice...

Joé... la de cosas que haces!

Jaime Trujillo Escobedo dice...

¡Por supuesto Laube! aunque solo sea por compartir ya merece la pena crear trucos ^_^.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo