Tabs, menú de contenidos con pestañas. Versión jQuery | Oloblogger Hay diversos scripts que facilitan la creación de cajas con pestañas, esas que nos permiten mostrar de manera alternativa una serie de conte...

14 de agosto de 2012

Tabs, menú de contenidos con pestañas. Versión jQuery

Hay diversos scripts que facilitan la creación de cajas con pestañas, esas que nos permiten mostrar de manera alternativa una serie de contenidos dentro de un mismo espacio.

Por otra parte muchos usamos jQuery -otra librería JavaScript- teniéndola incluida entre las que carga nuestra plantilla.

Cómo alguna vez me había hecho falta un sistema de estos, también llamados tabs (lengüeta, tabulación) y algunos lectores habían preguntado por ellos, pensé que tenía que haber alguna manera de aprovechar jQuery para hacer lo mismo y así ahorrarnos añadir otra librería adicional a la ya de por sí pesada plantilla Blogger.

Y claro que la hay. Sólo es cuestión de utilizar algunas instrucciones como hide o show, autoexplicativas en su lengua nativa, una manera de añadir o quitar clases a los elementos de lista activos y por último, agregar un efecto fade para redondear la faena.



El primer paso es incluir el código JavaScript antes de </head>. La primera línea que es la que carga jQuery es prescindible si ya la tenemos en nuestra plantilla.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña

// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

El segundo es simplemente crear unas capas con los distintos contenidos a los que se les debe incorporar una serie de ID distintos, precedidos de una lista de enlaces cuyo destino son esos mismos ID. Los contenidos irán a su vez dentro de una única capa contenedora y cada elemento irá con clases añadidas para poder controlar el elemento activo y también para poder darle estilo.

Lo podremos poner en un gadget o en una entrada y esta sería su estructura:

<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
CONTENIDO 1
</div>
<div id="tab2" class="contenido_tab">
CONTENIDO2
</div>
<div id="tab3" class="contenido_tab">
CONTENIDO3
</div>
</div>
<div style="clear:both;">
</div>

Y esto será lo que veremos antes de formatear todo, una lista de enlaces y a continuación una frase (el contenido de la primera capa), que irá cambiando según pinchemos en un enlace u otro. Probando que es gerundio.

El CONTENIDO 1
Y este es el CONTENIDO 2
Por último, el CONTENIDO 3


Para tener una cosa algo más decente, ya sólo resta dar estilo a las clases que hemos usado. Este sería un ejemplo de CSS que en Blogger, como es habitual, habría que insertar entre las etiquetas SKIN:

/* CSS Tabs jQuery */
.contenedor_tab{float:left;clear:both;width:600px;padding:0px;margin:0 auto;display:block;background:#ccc;border:1px solid #333;-moz-border-radius:0 0 7px 7px;-webkit-border-radius:0 0 7pc 7px;border-radius: 0 0 7px 7px;}
ul.tabs{float:left;margin:0;padding:0;list-style:none;height:32px;width:600px;margin-top:-7px;}
ul.tabs li{float:left;margin:0;padding:0;height:31px;line-height:31px;border:1px solid #333;margin-bottom:-1px;background:#333;overflow:hidden;position:relative;border:1px solid #333;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;}
ul.tabs li a{text-decoration:none;color:#fff;display:block;font-size:13px;padding:0 20px;border:1px solid #fff;outline:none;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;}
ul.tabs li a:hover{background:#666;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover {color:#333;font-weight:bold;background:#ccc;border-bottom:1px solid #ccc;}
.contenido_tab{padding:10px;font-size:1.2em;width:580px;}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

¿Vemos ahora cómo quedaría definitivamente?


Los marcadores usados en el enlace de cada elemento de lista, tienen que ser idénticos a los correspondientes ID con los que identifiquemos cada capa con contenido.

En este ejemplo la primera pestaña tiene id="tab1" y por tanto el enlace de la primera capa será hacia #tab1. Esta primera capa será inicialmente visible.
La pestaña 2, en este ejemplo con una imagen.

Dentro de cada capa podemos meter cualquier contenido...







Actualizamos para detallar la utilidad de cada clase.
  • .contenedor_tab: Contenedor general de la caja de pestañas
  • ul.tabs: Propiedades generales de la lista que formarán los contenidos
  • ul.tabs li: Cada una de las pestañas seleccionables (Opción1, etc.)
  • ul.tabs li a: Aspecto en estado normal de las pestañas
  • ul.tabs li a:hover: Aspecto hover de las pestañas
  • ul.tabs li.activa: Aspecto de la pestaña activa
  • .contenido_tab: Formato para el contenido
  • .contenido_tab img: Propiedades para imágenes dentro de contenido


Como la entrada es antigua, segunda actualización para que el cacharrito sea adaptable (RWD).

Este sería el CSS necesario para ello:

ul.tabs{width:100%;max-width:800px;margin:0 auto;padding:0;list-style:none;height:32px;font-size:0;line-height:0;}
ul.tabs li{display:inline-block;width:33.33%;margin:0;padding:0;height:32px;line-height:32px;background:#333;overflow:hidden;position:relative;border:1px solid #333;border-bottom:0;box-sizing:border-box;border-radius:7px 7px 0 0;}
ul.tabs li a{display:block;padding:0 5px;text-decoration:none;color:#fff;font-size:14px;text-align:center;border:1px solid #CCC;box-sizing:border-box;border-radius:7px 7px 0 0;}
ul.tabs li a:hover{background:#666;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover{color:#333;font-weight:700;background:#ccc;}
.contenedor_tab{width:100%;max-width:800px;margin:-1px auto 0;padding:0;background:#ccc;border:1px solid #333;border-top:0;box-sizing:border-box;border-radius:0 0 7px 7px;}
.contenido_tab{padding:10px;font-size:14px;box-sizing:border-box;}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

155 comentarios :

  1. muy bueno hace tiempo buscaba unas gracias olo

    ResponderEliminar
  2. Ta lindo, se ve más bonito que el que tengo actualmente.
    Pero necesitaría ayuda con el CSS porque la verdad no cazo un fulbo. No podrías agregar referencias al lado de cada parámetro como guía?

    ResponderEliminar
    Respuestas
    1. Sea, pero lo haré debajo para no enmarañar más el código.

      Eliminar
    2. hola amigo usted es un duro amigo tengo un prolema que no se me instala bien por que lo que pongo en el tabs solo aparece una vez creo que es que pongo mal el enlace en SKIN aque parte se refiere cuando dices SKIN por favor ayudame ppor favor

      Eliminar
    3. Hola. Me refiero a la parte CSS de la plantilla. También puedes añadir ese CSS desde Plantilla > Personalizar > Avanzado > Añadir CSS

      Más info: CSS Básico.

      Eliminar
  3. Muy interesante. Lo tendré en cuenta para el rediseñamiento del año entrante en http://psicologia-terapias.com
    Pienso simplificarla aún mas.
    Gracias por tu desarrollo en el área

    ResponderEliminar
  4. seria interesante combinar eso con load() para que cargue las cosas de las pestañas recién al hacerle click, y las destruya al pichar otra pestaña..

    ResponderEliminar
    Respuestas
    1. a mi tambien me interesa esa idea.

      Eliminar
    2. No entiendo... El contenido se carga completo al mismo tiempo que el resto de la página y a lo de destruirlo no le encuentro la utilidad ¿Podéis desarrollar un poco más esa idea?

      Eliminar
    3. si todavía sigue en discusión la idea lo que plantea luis es que solo cargue al dar click a la pestaña para así no hacer lenta las paginas en caso de colocar elementos pesados . como hacerlo?

      Eliminar
    4. Ah, vale. Si es eso no veo la forma de hacerlo, porque este sistema sólo oculta/muestra algo que está previamente cargado.

      Se pueden cargar cosas en una página dinámicamente con JavaScript pero para eso necesitamos tener un host externo dónde lo tengamos almacenado. Se solicita y se carga en la página... pero no creo que merezca la pena en este caso.

      Eliminar
  5. Muy bueno el gif, pero no termino de hacerme una idea exacta del problema. Supongo que lo que quieres es poner con este sistema varios de los gadgets que tienes en la barra lateral, dentro de un mismo espacio.

    Hazlo y déjalo en la parte inferior derecha aunque no se vea bien. Así podré echar un vistazo de cómo queda y averiguar qué pasa.

    ResponderEliminar
  6. Bueno Oloman Oloman; una duda.
    Ya lo tengo en mi blog y funcionando perfectamente, pero me sucede algo raro.
    Resulta que coloco todo el código en las entrada en la pestaña “edición HTML” y todo va perfecto, pero cuando cambio por cualquier razón a la pestaña “redactar” no me funciona, por que crea automáticamente una url de tipo “http://www.blogger.com/blogger.g?blogID” justo delante de los “#tab” .
    No se si será un problema común del código o solo me pasara en mi blog.

    ResponderEliminar
    Respuestas
    1. Es un problema común del editor de Blogger, que todos los enlaces vacios construidos con el símbolo #, los transforma en una URL como la que comentas. Y además es como dices, sólo pasa desde Redactar.
      Conclusión: Hazlo desde Edición HTML.
      Alternativa: Cambia el # por un javascript:void();

      Eliminar
  7. No me llegó ningún mensaje, pero es que prefiero que me lo expliques por aquí, por los comentarios. Te decía que lo pusieras y lo dejaras para que lo viera...

    ResponderEliminar
  8. Gracias por avisar de que lo solucionaste. Funciona perfecto y con tu enlace ya hay otra referencia para hacer esto.

    ResponderEliminar
  9. Pues sí; tuviste suerte de que pudiera hacerlo pronto. Espero que te sean útiles ;) Gracias.

    ResponderEliminar
  10. Como hago para hacer referencia con jQuery a un elemento de un form que tengo como contenido en uno de los tab? Específicamente es para hacer submit() con ajax

    ResponderEliminar
    Respuestas
    1. Pues, no se exactamente lo que quieres pero en jQuery se hace referencia a un contenido mediante su clase o mediante su id y un símbolo $ delante. Si es lo que creo, en tu caso vendría mejor una ID: $("ID_CONTENIDO")

      Eliminar
  11. Busque por muchas partes, pero ninguno se entendia, GRACIIASSS!!

    ResponderEliminar
  12. interesante, es una buena opcion para crear dos tipos de sistemas de comentarios.

    ResponderEliminar
    Respuestas
    1. Buena idea. Realmente sirve para meter cualquier cosa.

      Eliminar
  13. http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js oloman me explicas esto ??''llevo trabajando con html script hace 3 meses y no duermo y eston dado pasos grandes ..te juro cuado empece en esto estube buscando este programa como loko y gracias ati puedo dormir tranquilo

    ResponderEliminar
    Respuestas
    1. No hay mucho que explicar. Simplemente copia y pega esas líneas.

      La que citas en concreto carga una librería JavaScript muy conocida que se llama jQuery y con la que se pueden hacer multitud de efectos.

      Eliminar
  14. yo tengo un poblema al aplicar eso es que tengo un programa que meti que no lo deja funcionar pero esta bien voy aver si puedo meterlo en otro sitio y gracias ...
    me eche aqui toda la noche y al final para nada

    ResponderEliminar
  15. pero lo estube buscando me rompi mucho la cabeza

    ResponderEliminar
    Respuestas
    1. Quizás uses Scriptaculous o Mootools y esas otras librerías dan problemas de incompatibilidad con jQuery. Compruébalo.

      Eliminar
  16. quiero dejar mis respetos amigo la verdad es que brindas mucha ayuda si hay alguna forma para apoyarte o algo espero poder hacerlo :D

    ResponderEliminar
    Respuestas
    1. Bueno sí... Puedes invitarme a algo, arreglarme el coche, pintar mi casa... :)

      Gracias, pero me lo paso bien con lo que hago. Si acaso que si te gustó el contenido del blog, lo recomiendes cuando te pregunten ;)

      Eliminar
    2. jajaaja que manzano amigo jaja listo amigo unas heladas estaria bn sigue con tu trabajo amigo :)

      Eliminar
  17. Hola, esta de bolas tu blog, me preguntaba si es posible ocultar TODO el contenido pues al cargar aparece el contenido de la primera tab, hay una manera que no aparezca ninguna tab hasta dar click? Me ayudarías una eternidad si logro esto, busqué por todos lados y aquí encontré el que se ajusta perfecto a mis necesidades. Recomendaré el Blog

    ResponderEliminar
  18. ¿ves la línea marcada con "activar primera pestaña"? Pues hala, bórrala para que no se active, que creo que es eso lo que quieres.

    Una segunda opción sería contruir una primera pestaña sin contenido ni título ninguno.

    ResponderEliminar
  19. Saludos Oloman! y feliz año nuevo :)

    Lo primero, muchísimas gracias por compartir tus conocimientos, he encontrado este post de casualidad y ya revisando el blog completo lo encuentro súper útil. Quería consultarte una duda: trasteando con el código y sin agregar la parte SKIN, ya consigo la funcionalidad que buscaba; ahora bien, en vez de que muestre
    Opción 1
    Opción 2
    Opción 3
    Como lista de texto, he puesto botones en JPG, eso ya lo he conseguido, pero la duda es que los botones me siguen apareciendo como lista, y queria que salieran uno detrás de otro en línea horizontal. He borrado los "li" y "ul" del html pero no consigo que funcione, supongo que algo en el código JavaScript es lo que hace que se muestre como lista. ¿Qué debería de tocar en el código JavaScript para poder quitar el formato lista?

    Muchas gracias por anticipado por tu tiempo y disculpa la pregunta, llevo un par de horas y no doy con ello.

    ResponderEliminar
  20. Resuelto! solo hicieron falta algunas horas más ;)

    ResponderEliminar
    Respuestas
    1. Ferpecto. Con paciencia y el sistema de ensayo-error, se logran muchas cosas ;)

      Eliminar
    2. Jaime me dirias como hicieste eso? quiero cambiar ese texto (opcion 1 , opcion 2 y opcion 3 ) con imagenes pero cuando la cambio y le dio clic no funcionan.

      Eliminar
  21. muchas gracias migo muy bien explicado y muy sencillo ya lo anexe a mi proyecto

    ResponderEliminar
  22. Sólo tienes que cambiar el valor de COLOR en ul.tabs li a {} Esa clase es la que controla el aspecto de los enlaces. Para el que está activo (la pestaña visible), sería en ul.tabs li.activa a {}

    ResponderEliminar
  23. Hola Oloman, intenté que funcionara pero no quiere, pensé que se debía a la versión que tengo de las librerías ya que es la última y borré la linea de la librería pero aún así sigue sin funcionar, que puedo hacer?
    mira mi blog es este http://otakuworldsite.blogspot.mx

    ResponderEliminar
    Respuestas
    1. De momento copiar el código que pongo aquí tal cual y comprobar que funciona. Si es así entonces ya sólo tienes que rellenar el contenido y luego cambiar los colores. Si no te funciona dejármelo ver poniéndolo en una página estática (por ejemplo) para que la prueba no interfiera en tu blog.

      Eliminar
  24. Muy buenos días Oloman! una duda, se pueden poner pestañas dentro de una pestaña? estoy probando pero quizá haya que preveer algo desde el principio. ¿Sabrías decirme si es posible?

    ResponderEliminar
  25. Hola y enhorabuena por el post.
    me funciono de maravilla Ahora la duda que tengo es como o donde introduzco el contenido de cada pestaña. Lo que quiero hacer es que cada pestaña tenga texto e imagenes asi como links a por ejm contacta por email.....me podrías ayudar? Gracias

    ResponderEliminar
    Respuestas
    1. Como dice Jaime algo más abajo, lo que va dentro de cada "carpeta" se escribe en el HTML. Sería lo que en el ejemplo puse como "CONTENIDO1", "CONTENIDO2", etc.

      Eliminar
  26. FC el contenido lo metes en el HTML, fijate en el código fuente del ejemplo

    ResponderEliminar
  27. Oloman perdona la insistencia, te suena de algo esta posibilidad? sino sigo intentando ensayo - error... aunque hay riesgo de entrar en desesperación! jeje

    La duda era si se pueden poner pestañas dentro de una pestaña.

    ResponderEliminar
    Respuestas
    1. Boma aparte, Sí que se puede, pero yo no logré hacerlo funcionar bien para todos los casos y al final me conformé con el que publiqué

      Eliminar
  28. Hola tendrías que definir un segundo conjunto de declaraciones CSS usando otros nombres distintos para las clases que contengan elementos que tendrán ese segundo estilo. Con que añadas un 2 al nombre ya lo tendrías sin perder el hilo. Luego habría que incorporar al HTML de ese segundo cuadro de pestañas las nuevas clases. Si cambias muchas cosas quizás necesites también cambiar la función del JavaScript

    ResponderEliminar
  29. Gracias por la respuesta de tuya y de Jaime. Solo para aclararme. Esto quiere decir que esta solucion no puede reemplazar a las paginas que se crean con la plantilla de blogger (aquellas que parecen menús). Otra pregunta: como se hace para tener como tienes en tu blog la barra de iconos sociales en vertical y fija de tal forma que al hacer scroll dicha barra permanece como fija a la izquierda? Gracias !

    ResponderEliminar
    Respuestas
    1. Pues no sé si se podría hacer algo, pero es que son dos cosas distintas. Las páginas páginas son y Blogger te crea automáticamente un menú para que se pueda acceder a ellas y esto es un sistema para meter otro tipo de contenidos, no sólo enlaces a otras páginas.

      Lo de los iconos sociales fijos se hace con position: fixed; Echa un vistazo a este post: POSITION

      Eliminar
    2. Muchas Gracias !!

      Eliminar
  30. Hola, disculpa soy nuevo en esto, yo cree el cuadro y todo pero al ir a la entrada se ve el contenido de la tab 1 y yo le doy al clic al tab 2 para ver el contenido pero no se ve y regreso a la tab 1 y tampoco se ve, a que se debe esto?

    ResponderEliminar
    Respuestas
    1. La respuesta fácil es que no hiciste exactamente lo que se explica aquí, pero un vistazo al sitio dónde lo pusiste sin duda me ayudaría a ver algo más. Sin embargo en tu perfil no tienes enlazado ningún blog y no sé cúal es...

      Eliminar
    2. ntp ya lo solucione, el error estaba en borrar antes de guardar lo que esta antes de #tab2 que sale por defaut href="http://www.blogger.com/blogger.g?blogID=8386547817306919447#tab2">

      Eliminar
  31. Hola Oloman comparto mi resultado, edite un poco el CSS para añadir una textura de fondo al contenedor de las pestañas y edite el color de los bordes y familias de fuentes dentro del contenido, acá el resultado esperado:

    http://solomacosx.blogspot.com/2013/02/star-wars-galactic-battlegrounds.html#more

    Muchas gracias! me servirá mucho para realizar tutos!!

    ResponderEliminar
  32. Me costo pero finalmente logre incorporar este gadget multitabs. http://nekokoshan3.blogspot.com

    Tengo una pregunta, que es mejor. Colocar el CSS directamente en la Plantilla (HTML) o desde la parte de <> en Personalizar la Plantilla.
    Y siguiendo con la tematica es mejor agregar los gadget en la Plantilla (HTML) o desde Diseño?

    ResponderEliminar
    Respuestas
    1. Aunque funcionará en ambos sitios, lo correcto es incluir el estilo en la parte CSS. En Blogger esto es entre las etiquetas SKIN.

      También se puede añadir con el Nuevo Diseñador en Avanzado > Añadir CSS.

      Y siguiendo con la tématica, como dices, lo de los gadgets es indiferente ;)

      Eliminar
    2. Lo preguntaba porque, colocar el codigo CSS en "Personalizar" es mucho más sencillo que en "Editar HTML", no hay que buscar la parte correcta en que colocarlo. Mucho más ventajoso aun es poner el código de un gadget en "Diseño" que en la plantilla", porque se lo puede mover para cualquier parte del blog y se puede editar desde el blog mismo. Ahora, la pregunta en concreto es: ¿Hay diferencias notables a la hora de comprobar el rendimiento (cargar la pagina)?

      Eliminar
    3. Eso último lo desconozco, aunque sospecho que tiene que ser aproximadamente lo mismo. Y sobre las anteriores opciones para CSS, la del Nuevo Diseñador no la tienen todos. Ese es el único motivo por el que nunca me refiero a esa manera de añadir el CSS, pero es perfectamente válida y como dices, muy cómoda.

      Eliminar
  33. Gracias por el aporte
    tengo una duda Oloman, espero puedas ayudarme,
    ¿Como modifico el código para que al cargar la pagina, active la segunda o tercer pestaña junto con su contenido?

    ResponderEliminar
    Respuestas
    1. Pues no lo sé, pero prueba a cambiar esto: $("ul.tabs li:first") que es lo que activa la primera pestaña, por esto otro:
      $("ul.tabs li:nth-of-type(2)")

      A ver si funciona...

      Eliminar
  34. Hola! necesitaria saber si podes ayudarme de buena onda!...
    Yo lo que necesito saber es como agregar a mi blog las entradas que quiero que se vean en las diferentes paginas... por ejemplo... en mi blog cree la pagina: YO OPINO y ahi quiero que aparezcan todas las entradas a mi blog que se refieran a opiniones. (no se si me explico y como me pasa eso no se como buscar en la auyuda de blogger, que solo me muestra: COMO CREAR UNA PAGINA pero no me dice como hago para que las entradas que yo quiera que vayan a esa pagina aparezcan ahi).

    Porfi! soy un poco nueva en esto y se me hace medio dificil! graciasss!

    http://miarmarioperfecto.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola. Hoy es el día de la ETIQUETA, porque ya llevo tres o cuatro respuestas diciendo casi lo mismo :)

      Tienes que poner ETIQUETAS a cada una de las entradas para lograr clasificarlas. Luego ya sólo tienes que añadir a tu barra lateral un gadget tipo ETIQUETAS y automáticamente se generarán páginas con el contenido correspondiente a cada una de ellas. Al pinchar en cualquier etiqueta de ese gadget irás a esas páginas.

      Es lo que yo tengo arriba a la izquierda, dónde pone Artilugios, Blogger, BPT, CSS, etc. Pincha en una de esas palabras y lo verás, aunque en mi caso salen sólo los títulos porque lo modifiqué así. Supongo que eso es lo que quieres.

      Eliminar
  35. yo en lo unico que no entendi fue en esto - insertar entre las etiquetas SKIN... porfavor diganme en que no caxe esa parte!

    ResponderEliminar
  36. Si editas tu plantilla HTML y buscas SKIN verás que en la línea dónde aparece dos veces esa palabra, a la izquierda hay una flecha negra. Si la pinchas se despliega su contenido. Pues ahí dentro es dónde tienes que poner el estilo, el CSS que se cita en esta entrada... entre esas dos etiquetas SKIN.

    ResponderEliminar
    Respuestas
    1. Asi ya lo hice, pero cuando las coloco me salen asi mira aqui una foto(http://thesuperrcgeorge3000.mex.tl/imagesnew2/0/0/0/2/0/8/1/6/8/7/fail.png) Ahi esta la Imagen de como me quedo,,, si me pudieras decir que hacer seria Fantastico y si no lo dejo asi no mas,,, Gracias Por Contestar

      Eliminar
    2. Al fin pude ver tu blog :)
      En esta parte, añade un !important en el margin y quitarás ese espacio:
      ul.tabs {
      float: left;
      margin: 0 !important;
      padding: 0;
      list-style: none;
      ...

      Eliminar
    3. ...y también cámbiale el width=640 a los iframe que metes en cada pestaña para que quepan enteros y no se desborden. Con 580 creo que quedarán perfectos.

      Eliminar
    4. Gracias me funciono. Pero lo que ahora me pasa es que cuando le doy click en opcion 1-2-3 no sale el contenido que le eh puesto mira aqui el link (http://dbeslaley.blogspot.com/2013/04/blog-de-prueba_16.html) Gracias por Responder

      Eliminar
    5. Podrías ser que tienes varias versiones de jQuery que cargas desde distintas partes de tu plantilla deja sólo una y ponla lo más arriba posible. Debajo del cierre del SKIN he visto la 1.7.1. Deja esa y borra las demás que tengas.

      Eliminar
  37. buenas, el contenido de cada pestaña podria ser una pagina distinta?¿ es decir que la pagina ejemplo.php se abra en el lugar de "contenido 1",

    ResponderEliminar
    Respuestas
    1. Hola. De la misma manera que puedes poner un vídeo dentro de cada pestaña con un iframe o un embed, puedes añadir un iframe apuntando a otra página web y se verá.

      Lo que ocurre es que si la otra web no es tuya, no podrás controlar el ancho/alto de lo que se vea dentro. Pruébalo con cualquier dirección para ver lo que intento decir.

      Eliminar
    2. muchas gracias, es para apuntar a otros archivos .php de mi web, lo probare ahora ;)

      Eliminar
  38. Porque en la parte de SKIN cuando coloco el codigo los comentarios de blogger quedan en medio de el contenido de las pestañas?

    ResponderEliminar
    Respuestas
    1. Hola Movie. No sé a qué comentarios te refieres, pero en la parte de estilo, estos tienen que ir entre /* y */. En la parte HTML sería entre <!-- y --> Si se hace al contrario serán visibles en la página.

      Eliminar
  39. Perfecto Muchas gracias

    ResponderEliminar
  40. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  41. Ahora mismo funciona de 10. Antes tenia un problema y es que al hacer todo lo que expones en este post, me dejo de funcionar unos efectos que tenia (usaban Scriptaculous). Entonces me acorde que vi una solución a este problema en Ciudad Blogger
    Hize todo lo que ponia ahí y ahora me funciona todo perfecto. Te dejo el enlace de mi blog por si te apatece exarle un vistazo: www.maspc10.blogspot.com
    PD: Perdón por los 2 comentarios eliminados.

    ResponderEliminar
    Respuestas
    1. Se quedaron en uno. No hay de qué y gracias por avisar de que lo arreglaste para que no tuviera que verlo para nada ;)

      Lo he visto y pienso que te vendría bien un cambio de color en las pestañas.

      Eliminar
  42. Hola Oloman, quisiera saber si me puedes ayudar con lo siguiente, yo inserté dentro de mi página un tab, con 4 pestañas, dentro de cada una agrego el método include para agragar un formulario que tengo en otras páginas, pero cuando agrego el include a la pestaña 4, el formulario se me replica en las demás pestañas, es decir, es como si el formulario de la pestaña 4 quedara por fuera del área de trabajo, he intentado solucionarlo pero no le he conseguido, si sabes que es lo que ocurre te lo agradeceré enormemente.

    Mil gracias!

    ResponderEliminar
    Respuestas
    1. Pásame la dirección dónde tienes ese sistema de pestañas que si no lo veo no sé decirte.

      Eliminar
  43. Hola Oloman: Quería consultarte respecto al menú de mi blog ( http://bitcoinhispano.blogspot.com ), donde quiero quitar el borde gris del contorno. ¿Sabes cómo puedo hacer?
    Mil gracias y un saludo!

    ResponderEliminar
    Respuestas
    1. Me refiero al contorno gris de las pestañas claro. Un saludo!

      Eliminar
    2. Hola Oloblogger, ya lo he solucionado. Mil gracias de todas maneras. Era en la opción "Acentos" del diseñador de plantillas(un poco rebuscado). Un abrazo y felicidades por tu enorme trabajo.

      Eliminar
    3. Bueno, pues ya lo sabemos todos ;)

      Eliminar
  44. Pues lo siento, pero no. Nunca he publicado nada sobre cómo cargar contenido a demanda porque realmente no lo sé y nunca lo he necesitado, en cuyo caso ya me hubiera buscado la vida. Sorry...

    ResponderEliminar
  45. Oye Como Puedo Agregar Mas Opciones En La Tabla Me Aparece La Opción 4 o Las Que Quiera Poner Mas Sin Embargo No Puedo Pasar De 3 Tabs o Sea 3 Opciones De Contenido Ya Que Si Lo Hago No Me Funciona Correctamente Por Ejemplo Si Le Agrego Otra Opción 4 Pues Ya No Me Funciona Correctamente La Tab Me Salen Todos Los Vídeos o El Contenido Que Le Ponga Me Podrías Ayudar a Crear Mas Opciones De Contenido Pero Que Funcione La Tab... Porfa.

    ResponderEliminar
    Respuestas
    1. Fíjate en el post la estructura HTML que se sigue. Tienes que hacer tantos elementos con enlaces dentro de la lista (ul) como pestañas vayas a usar y luego en la la caja "contenedor_tab" tienes que hacer el mismo número de DIV que pusiste en la lista, teniendo en ambos casos mucho cuidado de no repetir las ID (#tab1 - tab1).

      Eliminar
  46. Oloman! Gracias por este truco! Pero me gustaría implementar unas tabs que usan jQuery UI pero ya que NO soy un experto en esto de los blogs y estoy comenzando con el mio, no se donde colocar cada codigo en mi plantilla. ME AYUDARÍAS CON ESTE: http://api.jqueryui.com/tabs/#entry-examples

    ResponderEliminar
    Respuestas
    1. ¿Y por qué no usas el que explico aquí que ya está desarrollado y explicado para que lo pongáis sin problemas? Es que no le veo ninguna diferencia de funcionamiento.

      Eliminar
  47. En mi blog http://cuantokochikame.blogspot.com.es/ no se me muestra la información pero el codigo lo hice exacto al de la pagina ¿que hago?

    ResponderEliminar
    Respuestas
    1. No veo este gadget en tu página, por lo que no puedo decirte qué es lo que está mal. No obstante, si lo haces como dices, exactamente igual que en esta entrada, seguro que te debe funcionar.

      Las dos únicas posibilidades para que no lo haga es o bien que no está exactamente igual o bien que ya tuvieras instalada jQuery y que ahora tengas dos librerías con distintas versiones. Sólo debe haber una.

      Eliminar
  48. Hola, me parece muy útil. pero, ¿se puede meter el widget de las entradas más populares en una de las pestañas?

    ResponderEliminar
    Respuestas
    1. Hola Julio. Sí que se puede poner, pero es algo más complicado.

      Lo que habría que hacer sería meter la parte HTML en la plantilla y luego, dentro de cada elemento de lista, insertar el gadget desde Diseño.

      Por ir por orden, tendrías que crear tres SECTION nuevas (tantas como pestañas) y luego replicar el HTML, pero poniendo cada SECTION dentro de cada uno de los LI.

      Eliminar
  49. Exelente me sirvio mucho! Gracias por este gran aporte, Saludos :3

    ResponderEliminar
  50. Oloman ayúdame a cambiar el texto opción 1, opción 2 y opción 3 por imágenes o es mucho pedir?, no logro que funcionen correctamente cuando lo hago.

    ResponderEliminar
  51. Respuestas
    1. fue una pregunta, o dijiste que se me paso el ejemplo?, lo que quiero es poner en vez de opcion 1, opcion 2 y ... por una imagen.

      Eliminar
    2. ahhh ok, ya vi lo que hiciste en google+ gracias.

      Eliminar
    3. Vosotros mismos... ;)

      Eliminar
  52. Que tal OlomaN. Mira he hecho todo lo que dices y no hay manera. Desaparece el contenido y estoy cansado de mirar que he hecho mal.Bufff.
    Mi web es muy simple: http://doroteando.blogspot.com.es/.
    Podrías decirme que me pasa??
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola. Lo que tienes que hacer es repasar los enlaces que tienes dentro de los elementos de lista (li), porque es eso lo que está mal. Compáralos con los de la entrada.

      Eliminar
  53. hola buen día .. no se si puedas ayudarme ya que lo que quiero es que al escojer una opción del menú vertical me abra una nueva tab .. que en ese momento se cree y tenga la propiedad de poderse cerrar

    ResponderEliminar
  54. ¿A qué llamas "menú vertical"? Y con lo otro de "crear" me pasa lo mismo... no entiendo lo que pides.

    ResponderEliminar
  55. Oloman hay algo que me molesta mucho, es lo es ladireccion que aparece justo antes de #, en uno de los comentarios dijeste que se podia cambiar # por javascript:void();, lo acabo de hacer pero no funciona. Tenia esto #tab1 y ahora lo cambio por esto javascript:void();tab1 ? es asi?

    ResponderEliminar
    Respuestas
    1. En este caso no se puede cambiar Braulio. javascrip:void(); sirve como alternativa a un enlace vacío, pero en este código no puede estar vacío, sino que tiene que tener el nombre del marcador de la pestaña a mostrar (#tabX)

      No tienes más remedio que editar en modo HTML evitando la pestaña Redactar del editor, o Blogger se carga el marcador.

      Eliminar
    2. :( que mal, entonces no hay una solución. Si alguien se ingeniara alguna manera de que al cambiar a la pestaña de redactar no se escriba eso, seria un éxito.

      Eliminar
  56. Disculpa pero soy yo otra vez. El problema que tengo es que cuando pongo dos de estas Tabs, el contenido de una se esconde pero cuando le doy a los titulos (de la tabs) se muestra el contenido y se esconde el de la otra, entra a esta entrada de prueba para que veas http://elblogdepruebaonline2.blogspot.com/2014/05/prueba-4.html.

    Si sabes como modificar el script para que el contenido de las dos se muestren te lo agradecería, lo he intentado en hacerlo pero no he tenido resultados buenos.

    ResponderEliminar
  57. No lo he podido encontrar en la página que me pasaste, pero te anticipo que este código no sirve para incluir dos cajas de este tipo en la misma página.

    ResponderEliminar
    Respuestas
    1. Disculpa, no pude esperar, pero ya solucione mi problema, ya pude hacer lo que quería, solo tuve que hace unas cuantas modificaciones al javascript como en el html. Esta es una de las entradas donde lo tengo implantado, mira como me ha quedado http://www.pelisday.com/2014/01/ver-pelicula-anos-de-esclavitud-online.html

      Eliminar
    2. Bien, pero sólo hay una caja con pestañas ;)

      Eliminar
  58. Grandísimo aporte, Oloman. llevaba un tiempo buscándolo y, una vez más, la solución me la diste tú. Me ha dado un poco de trabajo el anidar hasta tres niveles de solapas pero ha quedado como yo quería (también he tenido que cambiar algo el formato). El resultado se puede ver aquí http://www.geogebra-bloga.com/2013/12/aurkibidea-gaika-aurrebistekin.html (para ver tres niveles clickar en 'Matematika', por ejemplo). Sale un aviso de cookies pero que nadie se me asuste que son cookies de navegación y las de google (google analytics...). ¡GRACIAS!

    ResponderEliminar
    Respuestas
    1. Jajaja... Es que encima pones el aviso ese de las cookies en euskera que para la mayoría es similar al chino y ya nos acojonas del todo. Visto el sistema. Nunca se me hubiera ocurrido anidar solapas, pero es que normalmente no hace falta eso.

      Eliminar
  59. Todo eso lo puedes cambiar modificando el CSS, que es el último trozo de código de esta entrada. Allí encontrarás propiedades como COLOR, BACKGROUND, BORDER, etc. Sus valores es lo que has de modificar para conseguir el aspecto que quieres. Si sabes un poco de CSS es fácil. Si no, tendrás que hacer pruebas por el método de ensayo-error.

    ResponderEliminar
  60. Hola oloman muy buen aporte me encanto .. pero tengo una duda me gustaria poner una flecha de siguiente y anterior asi como en este ejemplo:

    http://4.bp.blogspot.com/-qzBRpsMeRsM/VBYr-vjiZyI/AAAAAAAAPRA/ku3pPF-hglY/s1600/Sin%2Bt%C3%ADtulo-2.png

    como lo estoy utilizando para colocar imagenes y aveces utilizo mas 17 , espero y me puedas ayudar un saludo!

    ResponderEliminar
    Respuestas
    1. ¿Muchas más? Es que si son pocas más, con cambiar el CSS de las pestañas haciendo la fuente y su ancho más pequeño tendrías bastante. Cualquier otra opción supondría crear un código nuevo, seguramente con JavaScript, que ahora mismo no sabría ni cómo montar.

      Eliminar
  61. Hola, quisiera saber si se puede poner 2 tabs diferentes en una misma entrada
    Ejemplo :
    VIDEO 1 Opcion 1 Opcion 2 ... Etc
    y mas abajo otro
    VIDEO 2 Opcion 1 Opcion 2 ... Etc

    ResponderEliminar
    Respuestas
    1. En esta entrada tienes al principio unas tabs sin formato y sólo texto al principio y luego ya las que son más "monas" con imágenes y eso... o sea que sí.

      Lo que pasa es que el código no está preparado para eso y toca duplicar todo cambiando el nombre de las clases. Es decir, tendrías que replicar el javascript con contenido_tab2, ul.tabs2 li:first, contenedor_tab2, etc. Luego con el CSS y el HTML lo mismo. De esa forma no se liaría el JavaScript.

      Hay soluciones más sencillas pero habría que reprogramar todo.

      Eliminar
  62. Me ha servido montones, muchas gracias por compartir, Funciona de maravilla. Todo excelente!

    ResponderEliminar
  63. Hola, como seria para que se vea igual que este:
    http://rimangas.blogspot.com/2014/11/one-piece-manga-767-espanol.html#

    ResponderEliminar
    Respuestas
    1. Pues evidentemente haciendo uno igual que ese XD

      Bromas aparte, la diferencia está sólo en la parte estética. Lo que es el funcionamiento básico a mí me parece que sería idéntico si usaras el código de este post.

      Eliminar
  64. HOLA ESTABA TODO BIEN HASTA QUE TOPE CON ESTO AYUDA QUE PUEDO HACER ME SALE ESTO
    ----------------------------------------------------------------------
    a href="https://www.blogger.com/blogger.g?blogID=1706598542083704133#tab3"

    ResponderEliminar
    Respuestas
    1. Y LO CABIA DE ESTA MANERA COMO EL DE ARRIBA
      ----------------------------------------------------------------------------------------
      href="javascript:void()tab3"

      Eliminar
    2. El enlace tiene que ser exactamente "#tab3", pero posiblemente pasaste a ver la entrada desde la pestaña Redactar del editor. En ese caso has de saber que Blogger tiene la puñetera costumbre de cambiarte esa almohadilla # por la dirección del borrador de entrada que estés redactando, por eso te sale eso tan raro.
      Edita la entrada desde la pestaña HTML, sustituye de nuevo por #tabX y publica sin pasar en ningún momento por Redactar. Verás que se termina ese problema.

      Eliminar
  65. hola que tal!! gracias por tremendo aporte, mi duda es la siguiente:
    cuando actualizo la pagina donde tengo el contenedor con los tabs, me aparece todo el contenido en la primera pestaña, cuando la clickeo aparece lo q realmente deberia verse (osea el propio contenido de tab 1) y con los otros tabs no hay problema, porque cuando los clikeo tienen su contenido como tiene q ser je!
    que podria ser???.bueno eso nomas, muchas muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Mina. Tendría que verlo dónde lo tienes montado para decirte algo más acertado, pero lo más seguro es que te saltaras alguna parte de código, que algún DIV no esté dónde debe o algo similar.

      Eliminar
  66. disculpa yo tengo un problem cuando pongo el codigo todo funciona perfecto pero lo malo es que mi sidebar deja de funcionar es porque tengo 2 librerias jQuery distintas hay alguna manera de que no interfieran?? intente declarando jQuery con una variable pero no me sale

    ResponderEliminar
    Respuestas
    1. Hola Juan. Efectivamente dos versiones distintas de jQuery pueden darte problemas. Usa sólo una de ellas y listo.

      Eliminar
  67. amigo me agrada mucho, pero como puedo hacerlo responsive? es lo que me falta para dejarlo funcional en mi pagina. Muchas gracias

    ResponderEliminar
    Respuestas
    1. ¡Deseo concedido!

      Mira la última actualización Diego ;)

      Eliminar
  68. tengo un problema con el tab. cuando introdusco los html dejan de funcionar varias cosas en mi blog. cuando introdusco estos codigos.

    ResponderEliminar
    Respuestas
    1. No te sé decir Series&Animes... No me indicas dónde pones este código ni cómo. De todas formas puede ser que interfiera con otro JavaScript que tengas o incluso con una posible segunda librería jQuery.

      Eliminar
  69. Hola una pregunta, tengo mi menu tab en una pagina llamada especialidades.html la cual contiene varios menu tab como 9 pestañas, pero tengo mi pagina inicial index.html la cual tiene un menu de cada una de las especialidades, pero no se como enlazar a cada una, ya que en especialidades.html me sale por defecto activada la primera pestaña, quisiera que cuando se marque por ejemplo desde el index la especialidad 5 se direccione a la pagina especialidades.html con la pestaña 5 activada, y asi para todos los enlaces del index. gracias porfavor ayudame

    ResponderEliminar
    Respuestas
    1. Se puede hacer Ariana, pero no es fácil de explicar detalladamente porque habría que desarrollarlo específicamente para cada caja de pestañas, según su construcción y contenido.

      Si te sirve de algo la idea porque tengas conocimientos suficientes de JavaScript, se podría hacer pasando el parámetro por URL de la pestaña activa

      Eliminar
    2. Gracias pero podrias ayudarme con el javascript o una pagina donde me ayude para saber como pasar el parametro url, gracias

      Eliminar
    3. Ya dije que no es fácil de explicar y además no puedo bajar a ese nivel de explicación para todos los que me preguntáis por el blog. Apenas tengo tiempo para contestar cuestiones sencillas. Espero que lo entiendas.

      Y sobre páginas dónde expliquen eso hay muchas.

      En el enlace tienes las mejores... y perdón por la broma ;)

      Eliminar
  70. ¿Podrías ayudarme en una cosa? Todo me funciona correctamente excepto una cosa: Cuando paso el ratón sobre una pestaña, ésta cambia a un color más oscuro. Hasta ahí bien. Pero luego al clicar y abrirse el contenido de esa pestaña, no se mantiene en el color más oscuro. De esta manera, el lector no sabe dónde se encuentra. Ahora mismo es muy fácil intuirlo pero más adelante tengo intención de añadir más pestañas y los lectores se liarán. Mi blog es: www.lasitakas.blogspot.com 

    ResponderEliminar
    Respuestas
    1. ¿A qué pestañas te refieres en tu caso, Katiana? Las que veo son las del gadget Páginas de Blogger y esas no tienen nada que ver con las de esta entrada.

      Eliminar
    2. No, no es del gadget de páginas, ese lo eliminé.
      Es un menú con pestañas y subpestañas desplegables que hice añadiendo un código html a la plantilla. He probado añadiéndole color de fondo debajo de #nav li li a:hover, #nav li li a:active { pero no me ha funcionado. No tengo ni idea de programación ni ese tipo de cosas, es sólo por intuición.

      Eliminar
    3. Ya entiendo, pero si lo que quieres es que además de cuando haces :hover, ese tono más oscuro se mantenga cuando cambias de página (cuando haces clic y vas a parar a la dirección de destino), lamento decirte que no es posible.

      Bueno, si es posible, pero es un engorro demasiado grande para el resultado que se persigue, ya que hacerlo con JavaScript u otro lenguaje similar, mediante una relación de URLs. El Script tendría que comprobar si se está en una de esas páginas y entonces colorear la pestaña.

      En el caso del gadget páginas ese tema lo controla Blogger y por eso es automático.

      Eliminar
  71. Muchas gracias por contestar. Al final volví a colocar el gadget de páginas e hice un apaño que me ha quedado monísimo.

    ResponderEliminar
  72. Como es tu costumbre, siemnpre compartes cosas interesantes, pero por alguna extraña casualidad, a mi solo me funcionan a medias y hecho todo lo que indicas pero no ocurre como tu ejemplo antes de poner este codigo en alguno de mis blogs, intente probarlo en uno nuevo por las dudas, esto es lo que ocurre http://carlitoxz.blogspot.com.ar/2016/05/tabs.html

    ResponderEliminar
    Respuestas
    1. Hola David. El problema está en el HTML que pones en la entrada.
      <li><a href="#tab1">Opción 1</a></li>
      <li><a href="#tab2">Opción 2</a></li>
      <li><a href="#tab3">Opción 3</a></li>

      Si lo pones y publicas funcionará sin problemas, pero si luego vuelves a editar, Blogger tiene algún problema con los símbolos # y los cambia por enlaces que nada tienen que ver con el nombre que inicialmente usaste (#tab1, #tab2 y #tab3).

      Si editas el post de pruebas comprobarás que el contenido del href está cambiado. Simplemente edita y pon de nuevo #tab1, #tab2 y #tab3 en lugar de las direcciones que verás y actualiza. Es un inconveniente y tendrás que repetir ese proceso cada vez que edites el contenido de un post con este sistema, pero también es inhabitual andar editando posts una vez publicados.

      Eliminar
  73. ola, como puedo hacerle para que los videos se adapten automáticamente al tamaño de la tab que he escogido? O_o

    ResponderEliminar
  74. excelente, estuve buscado esta informacion por casi una semana. ahora que encuentro estoy otra semana intentando acomodar para informacion desde la base de datos. y no puedo. quisas podrías hacer otra guia que optenga informe desde la base de datos. Gracias.!!

    ResponderEliminar
    Respuestas
    1. Blogger no incluye gestión de base de datos, pero si quieres apoyarte en las hojas de cálculo de Drive, se pueden hacer cosas como esta.

      Eliminar
  75. Hola Buen Post, Me funciona pero pero me daña el Slider de la parte principal

    ResponderEliminar
    Respuestas
    1. Hola. Por lo que ví eliminaste el blog de Blogger que tenías, así que supongo que eso que dices ya no será un problema para tí

      Eliminar
  76. Hola, Estoy usando este tab en blogger desde hace muchos años y ya tengo un montón de temas publicados pero tengo una pregunta se que no tienes tiempo pero espero puedas responder a mi pregunta. La pregunta es como implementar el javascript o script en wordpress logre hacer trabajar el CSS pero el script no funciona estoy usando un plugin para añadir CSS y JS el script lo e probado de muchas formas pero ninguna funciona quisiera saber si tu tienes alguna idea, estaría muy agradecido si me ayudaras, como tengo un blog para adultos y en blogger no puedo usar publicidad xxx porque blogger ya no admite dicho contenido y quiero pasarme a wordpress y usar los mismos estilos que tengo en blogger ya que si cambio ej: el tab es mucho trabajo cambiar todo mi contenido, saludos espero tu respuesta mientras tanto seguiré buscando una solución por ahí saludos y gracias...

    ResponderEliminar
    Respuestas
    1. No te puedo ayudar bien con eso porque no domino WP, pero básicamente tendrás que descargar jQuery y subirlo a una carpeta para cargarlo al cargar la página. Eso o enlazarlo como en Blogger directamente de los servidores de Google.

      Con respecto al resto del SCRIPT, pues no sé. Es posible que entre etiquetas SCRIPT funcione dentro de la parte HTML.

      Eliminar
  77. hola que tal tengo una duda amigo y si quiero hacer referencia a dos contenidos con un solo tab como lo haria

    ResponderEliminar