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.

Tabs o pestañas en blogger (II) 20 diseños a elegir

Hace tiempo aprendimos a poner en la barra lateral del blog, un artilugio que mostraba contenido por medio de solapas: las Tabs o Pestañas. Tal y como expliqué anteriormente, resulta de mucha utilidad pues nos ayudará a encajar el contenido que por motivos de espacio no puede implementarse en la barra lateral.

En esta entrada presento una nueva versión, basada en la librería jQuery y con un total de 20 modelos a elegir, de manera que utilices el que mejor se ajuste al diseño de tu blog.

Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> en tu plantilla y justo antes añade esto:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

Ahora, observando la imagen, agrega bajo los bloques que acabas de insertar, una línea de código dependiendo del modelo escogido.




Desplegar códigos [+/-]

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab1.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab2.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab3.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab4.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab5.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab6.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab7.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab8.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab9.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab10.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab11.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab12.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab13.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab14.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab15.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab16.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab17.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab18.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab19.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab20.css" type="text/css" />


Finalmente, procederemos a introducir el contenido de cada pestaña.


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




Incluye esto en su interior:

<div id="tabs">
<ul><li><a href="#tabs-1">PESTAÑA 1</a></li><li><a href="#tabs-2">PESTAÑA 2</a></li><li><a href="#tabs-3">PESTAÑA 3</a></li></ul>
<div id="tabs-1">CONTENIDO PESTAÑA 1</div>
<div id="tabs-2">CONTENIDO PESTAÑA 2</div>
<div id="tabs-3">CONTENIDO PESTAÑA 3</div>
<center><a href="http://goo.gl/favZ"><div id="bbTabsQuery"><img src="http://1.bp.blogspot.com/_Bvhqq3YFEx4/TPwSxsIYLFI/AAAAAAAAAf0/bSVBmFIq5Nc/s320/aleman.png"/></div></a></center>
</div>

Reemplaza en el código PESTAÑA X por el título que llevará la pestaña y CONTENIDO PESTAÑA X por el contenido que mostrará cada solapa.

Ten en cuenta que el término contenido abarca mucho más que texto por lo que podrás mostrar imágenes, enlaces e incluso un reproductor de música.

Guarda el gadget una vez hayas terminado.

Miguel Ángel dice...

SIN PALABRAS. Creo que esta entrada nos enseña el trabajo que realizas y el esfuerzo. No sabes lo que te agradezco que compartas estos diseños con nosotros. Escogí el 12, es ideal (como tu blog).

Patri dice...

Hola Jaime! muy buen post, muchas gracias por todo el trabajo, un abrazo.

Javier dice...

Jaime solo se decirte gracias por escuchar mi ayuda

Jaime Trujillo Escobedo dice...

Muchas gracias Miguel Ángel, por tu comentario en el que puedo claramente observar tu agradecimiento hacia mis artículos. Espero que este gadget conjunte a la perfección con tu plantilla.

Jaime Trujillo Escobedo dice...

Gracias a ti, Patri. Ten en cuenta que hace uso de jQuery por lo que su instalación será aún más sencilla si ya has utilizado dicha libreria con anterioridad. ¡Abrazos!

Jaime Trujillo Escobedo dice...

Gracias a ti, Javier. Ya me contarás acerca del modelo seleccionado.

Laube dice...

Siempre buscas contenidos interesantes... Tendré que estudiar dtenidamente este asunto.
Un besoteeeeeeee

Ricard dice...

Hola Jaime!

Siempre esta bien poder personalizar un poco mas blogger. :)

Saludos,
Ricard

Jaime Trujillo Escobedo dice...

Gracias Laube. Lo mejor de incluir tabs en un blog es la facilidad con la que podemos presentar el contenido y el tiempo de carga que ahorramos (los artilugios ocultos se muestran solo cuando el lector selecciona la solapa que los recoge).

Jaime Trujillo Escobedo dice...

Completamente de acuerdo con tu opinión, Ricard. Las solapas o tabs son además una perfecta herramienta para controlar el tiempo de carga en cualquier página.

JEFA_Mad dice...

hola Jaime, hay posibilidad de que no se vea nada del contenido hasta que se pinche en la solapa? como tendría que hacerlo?

Jaime Trujillo Escobedo dice...

Para hacer que el contenido aparezca oculto...

1) En primer lugar, modifica el término tabs-1, tabs-2 y tabs-3 de tal forma que empiece con la cira 2: tabs-2, tabs-3 y tabs-4.

2) Incluye la siguiente línea en el código:

<li><a href="#tabs-1"></a></li>

Justo antes de <div id="tabs">
<ul><li>.

3) Posteriormente, agrega esto (justo debajo de </li></ul>):

<div id="tabs-1"></div>

Automoto Marco dice...

ES UNA PASADAAAAAAAAAAAAAAAAAAA TU BLOG

Diego Rodríguez Toribio dice...

Simplemente genial tu blog

ADM Omoi dice...

Este blog aún funciona? Soy brasileño y me gustó mucho su trabajo Brigadão genial ^^:D:)

Juan Malarin dice...

Despues de dos años los tabs aun funcionan, ojala nunca caiga un abrazo gracias por tu ayuda y semejante trabajo, estoy muy agradecido de corazón.

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