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

Diseño - Edición de HTML - sin expandir 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 [+/-]

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaCc9nRs-_T5s1DTjYbwwkEooQbhdKshWNHxJe9dHp8j_X06mT_WiTgrSb_CcoEt-u7RcthkQwNeSMkB-gCHGkLNxqZ5vs84wOIBGehH3h1ZUpIz2natIec_-Jg689kax9FpzOn_Pv2Ope/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).; 7/2/11
Patri dice...: Hola Jaime! muy buen post, muchas gracias por todo el trabajo, un abrazo.; 7/2/11
JTobaruela dice...: Jaime solo se decirte gracias por escuchar mi ayuda; 7/2/11
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.; 7/2/11
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!; 7/2/11
Jaime Trujillo Escobedo dice...: Gracias a ti, Javier. Ya me contarás acerca del modelo seleccionado.; 7/2/11
Laube Leal dice...: Siempre buscas contenidos interesantes... Tendré que estudiar dtenidamente este asunto.
Un besoteeeeeeee; 7/2/11
Ricard dice...: Hola Jaime!

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

Saludos,
Ricard; 7/2/11
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).; 9/2/11
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.; 10/2/11
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?; 22/2/11
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>; 22/2/11
Automoto Marco dice...: ES UNA PASADAAAAAAAAAAAAAAAAAAA TU BLOG; 23/2/11
Diego Rodríguez Toribio dice...: Simplemente genial tu blog; 12/4/11
Shappa dice...: Este blog aún funciona? Soy brasileño y me gustó mucho su trabajo Brigadão genial ^^:D:); 12/5/12
Expiador 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.; 11/11/13

Pages