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 ...

14 de agosto de 2012

124 ☆ 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

¿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.

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

124 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
  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
  5. Muy bueno! Pero en mi blog www.planeta-grandt.com.ar no logro hacerlo funcionar, lo quiero aplicar en varios gadgets pero sólo se muestra el contenido de un tab :S me sabría ayudar? Acá le dejo una imagen de lo que sucede: https://dl.dropbox.com/u/4349555/demo-tab.gif

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
    2. Si eso es lo que quiero, ahí le estoy intentando escribir a través del formulario de contacto para pasarle donde coloque el ejemplo y otra consulta más, pero hasta poniendo bien el captcha, tira error, creo no funciona más eso. Revise si le llego mi mensaje, sino le escribo nuevamente hasta que me acepte :s. Muchas gracias por su ayuda!

      Eliminar
    3. 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...

      Eliminar
    4. acá lo puse para que lo vea en mi blog de pruebas. Ademas me gustaría sabes si no me ayuda con este otro sistema de tabs que me simplifica tener que poner 2 tab en cada gadget y son ese en 2 tabs divido 4 gadgets en un lado y 4 del otro. Pero en ese tabién tengo el mismo problema, se muestra sólo el que dice PRIMERA A, y el contenido de B NACIONAL al dar clic no se ve. Y con los de usted pasa lo mismo, das clic en un tab y desaparecen los demás. Espero pueda ayudarme mas en el otro que le pase ya que me resultara mas sencillo y es el que me gustaría poner.

      Eliminar
    5. Ya coloque los tabs en www.planeta-grandt.com.ar, al final pude solucionar el problema usando los otros tabs, lo único que tuve que hacer fue crear un script para cada tabs de cada gadget. Échele un vistazo a ver si funcionan bien. Muchas gracias por la su ayuda!

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

      Eliminar
  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. Oloman subiste lastablas que tanto deseaba :D gracias por tomar en cuenta y darte el de esos tiempitos que t son dificiles :D. Exitos Oloman

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

      Eliminar
  8. 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
  9. Busque por muchas partes, pero ninguno se entendia, GRACIIASSS!!

    ResponderEliminar
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. Gracias oloman me viene perfecto el tutorial :D

    ResponderEliminar
  16. 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
  17. ¿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
  18. 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
  19. 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
  20. muchas gracias migo muy bien explicado y muy sencillo ya lo anexe a mi proyecto

    ResponderEliminar
  21. una pregunta y para cambiar el color de los link dentro del tab como debe armarce el codigo

    ResponderEliminar
    Respuestas
    1. 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 {}

      Eliminar
  22. 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
  23. 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
  24. 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
  25. FC el contenido lo metes en el HTML, fijate en el código fuente del ejemplo

    ResponderEliminar
  26. hola megusta mucho este truco pero tengo una duda si quisiera usarla mas de una vez pero con estilos diferentes como deberia quedar el codigo

    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. quiero usar el tab en distintas partes del blog pero quiero que tengan un estilo diferente por ejemplo que una tenga fondo blanco y la otra no tenga fondo no se me explico

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
  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. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  40. 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
  41. 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
  42. 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
  43. He leído poco tu blog, pero de lo que leído me ha encantado XD.

    Disculpa, ¿No tendrás alguna solución para que solamente cargue la pestaña activada o seleccionada y no todas al mismo tiempo?

    En mi blog tengo varios videos y el hecho de que carguen todas al mismo tiempo… pues, a lenta mucho mi blog.

    Si pudieras ayudarme con ese problema te lo agradecería infinitamente.

    Saludos.

    ResponderEliminar
    Respuestas
    1. 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...

      Eliminar
  44. No importa mi hermano, ya muchos de tus post me han ayudado bastante.

    Saludos y gracias de todas formas :)

    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
  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. Muchas gracias amigo no sabes cuanto estuve buscando hacer esto de verdad muchas gracias desde hoy ya te ganaste un seguidor y fan. Solo una duda que me surge y espero me puedas ayudar sobro todo a lo estetico como cambio ciertas cosas como por ejemplo el fondo o marco como le cambio el tamaño y se puede cambiar el tipo de letra de las opciones o el color de ante mano muchas gracias

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar