Gadget de solapas | Oloblogger Como cada vez tenemos más llena de cacharritos la barra lateral, quizás a más de uno nos venga bien usar un contenedor con pestañas para con...

31 de mayo de 2010

Gadget de solapas

Como cada vez tenemos más llena de cacharritos la barra lateral, quizás a más de uno nos venga bien usar un contenedor con pestañas para contenido diverso. La cosa funcionaría tal que así:

Este es el contenido que se verá al pulsar la Pestaña 1.

Aquí podría ir un texto o cualquier otro componente: una imagen, un enlace, un vídeo... incluso podemos poner algún script como hemos hecho en las siguientes pestañas.

Entradas
Comentarios


Hay muchos scripts para poder formar este tipo de recuadros con pestañas, pero este en concreto se consigue con el llamado SimpleTabs, de Komrade. SimpleTabs incluye la grabación de una cookie que "recuerda" la última pestaña visitada y, ciertamente, el código es tan sencillo, que aprovechamos el propio invento para explicar cómo instalarlo...

Esta es la parte que hay que poner antes de </head>.

Si no quereis quedaros colgados cualquier día, lo recomendable es que descargueis el fichero simpletabs_1.3.js desde el enlace y lo realojeis en vuestro sitio habitual para estos menesteres (¿Google Sites?). Luego cambiais la dirección por la que aquí se muestra marcada en verde y que sólo está para que podais hacer una prueba inicial.

<script src='http://oloblogger.googlecode.com/files/simpletabs_1.3.js' type='text/javascript'/>
Este es el CSS básico para el estilo del cuadro y de las pestañas. Cuando lo tengais funcionando podreis cambiar colores, tamaños, efecto hover, etc. Como siempre, se ha de insertar antes de ]]></b:skin>.

div.simpleTabs {padding:10px; }
ul.simpleTabsNavigation {margin:0 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li {list-style:none; display:inline; margin:0; padding:0; }
ul.simpleTabsNavigation li a {border:1px solid #E0E0E0; padding:3px 6px; background:#F0F0F0; font-size:14px; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; }
ul.simpleTabsNavigation li a:hover {text-decoration:none; background-color:#F6F6F6; font-family:Georgia, "Times New Roman", Times, serif; }
ul.simpleTabsNavigation li a.current {background:#fff; color:#222; border-bottom:1px solid #fff; }
div.simpleTabsContent {border:1px solid #E0E0E0; padding:5px 15px 15px 15px; margin-top:3px; display:none; }
div.simpleTabsContent.currentTab {display:block; }
Con lo anterior todavía no nos saldrá nada, pues nos falta montar con HTML, la lista para las pestañas y los DIV's que contendrán la información. La estructura sería esta:

<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="javascript:void(0);">Pestaña 1</a></li>
<li><a href="javascript:void(0);">Pestaña 2</a></li>
<li><a href="javascript:void(0);">Pestaña 3</a></li>
</ul>
<div class="simpleTabsContent">Contenido pestaña 1</div>
<div class="simpleTabsContent">Contenido pestaña 2</div>
<div class="simpleTabsContent">Contenido pestaña 3</div>
</div>


Como rezaba el contenido de la pestaña CSS, las clases que forman las pestañas y el contenido del recuadro, son configurables, pudiendo conseguir cosas algo más sofisticadas que las que estais viendo. Los selectores que manejan lo básico son los siguientes, aunque podríais incorporar alguno más si fuera necesario.

div.simpleTabs: El gagdet completo
ul.simpleTabsNavigation: La línea que forma las pestañas
ul.simpleTabsNavigation li: Cada una de las pestañas
ul.simpleTabsNavigation li a: El enlace de texto en cada pestaña
ul.simpleTabsNavigation li a:hover: Efecto hover
ul.simpleTabsNavigation li a.current: La pestaña activa
div.simpleTabsContent: El contenido de los recuadros
div.simpleTabsContent.currentTab: 'Block', para que el recuadro activo se vea

El HTML lo podeis poner en un post, como en estos ejemplos o en un gadget tipo HTML.

Para crear una pestaña que simule el "cierre" del gadget, es suficiente con no meter ningún contenido en el DIV simpleTabsContent correspondiente.

¿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

51 comentarios :

  1. Muchas gracias por el recurso de Simpletab,,,super chevere.

    ResponderEliminar
  2. Hola oloman. te hago un pregunta: Mi hermana tiene cuenta en twiter y desde ahi puede seguir mis blogs. Pero no puede comentar con su cuenta twiter. Como puede hacer?

    ResponderEliminar
  3. Anónimo1/6/10, 0:16

    Ains... ailofyu una jartá^^

    Justo hace un par de días, aligerando la sidebar de uno de mis blogs iba a preguntarte si había algún modo de hacer pestañas laterales o cosas así como esta... Hoy es tarde, pero mañana me pongo a toquetear todo (haciendo previa copia de seguridad, que ya sé lo que pasa xDD )

    ¡¡Gracias!!

    ResponderEliminar
  4. Anónimo, cómo dices es un recurso y como tal, debe ser usado cuando haga falta, ni más, ni menos.

    Rodry, para VER twitts no hace falta tener una cuenta Twitter, pero para EMITIR un twitt sí. Realmente los twitts no pueden ser comentados, sino sólo CONTESTADOS desde otra cuenta Twitter. Posiblemente, tu hermana no tiene dicha cuenta porque de lo contrario, podría "twittear". El cielo está enladrillado, quién lo desenladrillará... :D

    ★ Mσяgαиα ★, suerte con los toqueteos :)

    ResponderEliminar
  5. Hola oloman! Creo q no me entendiste. Me refiero a que si ella puede comentar en mis blogs cn su cuenta, no desde su cuenta. Es decir, en vez de comentar como anonimo, nombre/url, cuenta google, etc, q use la de twiter.

    ResponderEliminar
  6. Hola Oloman.Cuando al inicio del post hablabas de mas de uno...allí estaba yo, en primera fila con los cacharritos...este muy bueno por cierto. Un abrazo especial, desde el otro lado del planeta.Te comento con el nombre de usuario de un colega, a quien le estoy ayudando a construir su blog, pero estoy seguro que sabrás quien soy. Mi pregunta es la siguiente: Hice todo tal y como lo explicas, pero al colocar el código en el HTML de un post y dar a publicar...Las pestañas y el contenido, me aparecieron uno debajo del otro y no al lado.Que parte del CSS hay que modificar para arreglarlo. Lo he dejado tal y como salió, por si tienes un espacio para verlo en:http://pachecoplastic.blogspot.com/2009/12/mentoplastia.html
    Gracias de antemano y Saludos.
    PD:La mayoría de lo que aparece en el blog, lo he implementado gracias a tu post enmarcar vídeos.ejemplo del uso de position.En especial un botón enlace de consultas online. Míralo...es parte de tu obra.

    ResponderEliminar
  7. Me recuerda a un recurso que utilicé una vez en un viejo blog que ya cerré, que utilizaba la libreria JQuery, pero con la ventaja de que es más ligero, no necesita librería alguna y ese extra de las cookies para recordar la pestaña.

    Me gusta... Ya veremos cuando me pongo a experimentar con estas cosas de nuevo.

    Un saludo, Oloman y compañía.

    ResponderEliminar
  8. Gracias teacher!!!Há dias procuro esse recurso!
    Besotes!

    ResponderEliminar
  9. Anónimo2/6/10, 8:40

    Ya ando con los toqueteos, consigo que aparezcan las pestañas pero no que éstas contengan algo en su interior. En content puse un enlace, texto y no sé qué más cosas probé y ni modo...

    ¿Puede ser porque el Blog es privado?

    Por otra parte, ¿se puede poner en las solapas/pestañas artilugios de Blogger (archivo, etiquetas, seguidores...? En caso de que sí se pueda, ¿cómo?

    Geacias^^

    ResponderEliminar
  10. Rodry, para comentar en Blogger y que yo sepa, sólo puedes hacerlo con los tipos de cuenta que aparecen en el desplegable "Comentar como:...". Estas son Google, LiveJournal, wordPress, TypePad, AIM y OpenID.

    Hernando, tú tienes algo que ver con una web de ositos ¿no? :D Bueno, lo de las pestañas te sale de esa manera porque para colocar código en un post, hay que redactarlo todo seguido, sin saltos de línea. Es decir, para que te funcione bien, hay que copiar-pegar y después eliminar todos los saltos de línea que haya.
    Sobre el blog nuevo, no olvides verlo tanto en IE como en FF. Creo que hay algo que te sale distinto, aunque si no es relevante eso, pues da igual.

    José GDF, así es. Se me olvidó comentar que el script ocupa muy poco. Menos de 10Kb

    Mamanunes, no hay de qué. Sólo expliqué algo ya existente. No inventé nada :D

    Mσяgαиα, que el blog sea privado, no debe afectar en este caso. Comentas que lo pusiste en CONTENT, pero realmente es dentro de los DIV's con la clase simpleTabsContent.
    Con respecto a los artilugios propios de Blogger, en un principio debería funcionar creando el artilugio, cortando de la plantilla lo necesario y después pegándolo dentro del susodicho DIV.
    Otra forma sería poniendo el HTML directamente en la plantilla de manera que los DIV's "rodearan" (apertura y cierre) a cada gadget.
    Lo cierto es que no he probado, así que ya me contarás.

    ResponderEliminar
  11. Ah ok. Crei que se podia, al poder seguir un blog desde twiter, capaz q se podia comentar. Gracias por tomarte el tiempo de responder. Nos vemos Oloman. Un abrazo.

    PD: Mi hno me preguntó cuales para mi eran los 2 paises que podian ganar el mundial. Y le dije: Argentina y España. :) Suerte para el mundial! Un saludo desde argentina!

    ResponderEliminar
  12. Ok, encontré el problema... creo que a Google sites lo subí mal porque al poner mi enlace no funciona pero con el tuyo sí... :-S

    ResponderEliminar
  13. Si...web de ositos,jeje. Lo apliqué como me indicaste, en linea y sin saltos...Perfecto.Hasta logré cambiar las letras de las solapas por imágenes. Muchas Gracias.
    Una inquietud. Es posible darle al marco de los contenidos una altura fija en px y adicionarle una barra vertical de desplazamiento. Para así, lograr que el tamaño, quede siempre igual y parejo al de la sidebar. Y tener contenido de diversa extensión, sin que afecte la armonia?.
    De ser factible, me complacería...me echaras una mano.
    Saludos.

    ResponderEliminar
  14. Pues hice pruebas y sí que es posible, pero ahora no recuerdo exactamente.

    Pienso que en la parte CSS hay que modificar la clase que sirve para el contenido de cada pestaña:
    div.simpleTabsContent

    En ella incluye un HEIGHT con el valor que quieras. Si lo haces tan alto como el mayor de tus contenidos, no necesitarás nada más. Si quieres que sea con barra de scroll independientemente del tamaño de cada contenido, añade también OVERFLOW:AUTO;

    Ya nos cuentas...

    ResponderEliminar
  15. Siiiii....Solo fue adicionar height y overflow...y guala.Gracias.
    Un abrazo caluroso desde Barranquilla.

    ResponderEliminar
  16. No funciona, funciona de a ratos. Gracias por la data igualemente

    ResponderEliminar
  17. Fede, funciona siempre que la página termine de cargarse del todo. El problema es que mi página tiene demasiados cachivaches y hay días en los que tarda demasiado en cargar totalmente.

    ResponderEliminar
  18. Hola Oloman, Y como haces unas pestañas tan chulas como las que tienes tu arriba Indice,Enlaza,S+Ingenio? me gustaria hacer algo asi, incluso mas sencillo, simplemente que el texto sea diferente poniendola como imagen ya que no consigo añadir una nueva fuente al blog.
    Muchas gracias por tus aportes!

    ResponderEliminar
  19. Laura, eso es un poco largo para explicar aquí, además de que no me resulta fácil hacerlo con detalle de manera simple.

    De todas formas, todo está basado en el efecto rollover, del cual puedes ver una entrada en este enlace:
    Botones en movimiento

    Saludos.

    ResponderEliminar
  20. HOla una pregunta, las solapas me kedaron bien, estaban funcionando bien pero de un momento a otro dejo de funcionar como lo reparo y lo peor k cuando kiero retirar todos los codigos de la solapas dela plantilla me desconfigura la plantilla...

    ResponderEliminar
  21. Gracias Oloman! al final encontre otra entrada sobre "imagen con pestañas en la cabecera" que era exactamente lo que queria. Ahora investigare como aplicarle el efecto rollover. Muchas gracias!

    ResponderEliminar
  22. Ricardo, no localizo las pestañas en tu blog. Por otra parte, lo que veo, lo veo correctamente ¿el problema lo tienes en una entrada en concreto?

    Ok Laura. Investigar, probar y equivocarse es la mejor forma de descubrir nuevas cosas.

    ResponderEliminar
  23. Oloman,

    Creo que quienes dicen que no funciona puede deberse a lo que he detectado yo. Con independencia del navegador, si estoy logueado en el blog como autor o administrador funciona perfectamente. Pero si se hace sin registrar no funciona. Muestra las pestañas pero no su contenido. Puedes comprobarlo en http://madridhockeylinea.blogspot.com/p/pistas-hl.html. Es como si la ejecución del script estuviese condicionada a ser un usuario registrado.

    ResponderEliminar
  24. Hola oloman! antes que nada gracias por este post...me ha servido para aligerar un poco mi barra lateral y además añadirle un diseño muy majo :) pero tengo una duda que ojalá puedas resolverme... usé la tabla para mostrar una lista de libros (pestaña uno: leyendo/ pestaña dos:pendientes/ pestaña tres: favoritos) y pongo fotografías de las portadas. en la tercera pestaña tengo más de un libro, y las portadas me salen una bajo la otra... hay algún código o algo así para que me salgan de dos en dos? no sé si me explico bien, soy muy desastre... en todo caso, te dejo el link de mi blog, ojalá puedas echarle un vistazo y entenderme... muchas gracias!

    http://esenciasdemi.blogspot.com/

    ResponderEliminar
  25. vale...ya he descubierto como... xD haciendo más pequeñas las imágenes...disculpa las molestias!

    ResponderEliminar
  26. Torturitas, yo no estoy registrado en tu web e incluso he probado a ver la página que dices desde un navegador en el que no estuviera logueado siquiera en Google. En ambos casos,tu mapa y tus pistas ;) se ven perfectamente. Creo que seguimos sin saber exactamente lo que le ocurre a la gente con problemas.

    Rakel, no hay nada como hacer pruebas y más pruebas, y descubrir nuevas cosas uno mismo. Esas no se olvidan ;)

    ResponderEliminar
  27. Algo falla en este buen invento.

    El mismo código en plantilla de clases y llamada al script, y lo mismo en la entrada de la página, y en un blog funciona y en otro no.

    Funciona: http://madridhockeylinea.blogspot.com/p/pistas-hl.html

    No funciona: http://mapkonomistpruebas.blogspot.com/p/spv.html

    ResponderEliminar
  28. HOLA ME PODRIAS AYUDAR POR FAVOR OLOBLOGGER PUES ME PODRIAS DECIR COMO COLOCAR TU MENU EL CUAL APARECE AL LADO DERECHO DE TU BLOG DONDE APARECE:
    ETIQUETAS
    Artilugios (65)
    Blogger (121)
    Botones (35)
    BPT (59)
    CSS (46)
    ECT...
    Y A LA VES QUE APARESCAN POR EJEMPLO DONDE DICE ARTILUGIOS TIENES 65 SOBRE ESE TEMA COMO LO PUEDO HACER Y LO OTRO LA PLANTIA LA CREASTES TU O LO DESCARGASTES DE OTRO CITIO ESPERO Y ME AYUDES PUES SOY NUEVO EN ESTO VISITA MI NOMBRE DE USUARIO E INGRESA A MI SITIO Y VERAS A QUE ME REFIERO.

    ResponderEliminar
  29. Eso que comentas es un gadget que viene de serie. Puedes encontrarlo accediendo a tu Escritorio > Elementos de Página > Añadir gadget > Seleccionar "Etiquetas". Después encontrarás algunas casillas para que se muestren o no los números.

    Con respecto a la plantilla, esta basada en la Notepad Chaos para Blogger. Sólo tienes que buscar y encontrarás varias páginas desde las que te la puedes descargar.

    ResponderEliminar
  30. Algo falla y no sé que es Oloman.

    El js está público en http://sites.google.com/site/mapkocmapkoc/resources/simpletabs_1.3.js

    He probado incluso con el tuyo.

    Si estoy logueado con la cuenta de Google se despliegan las solapas. Bueno, sólo con Chrome. En IE ni logueado funciona. Da un error en js.

    Pero si no estoy logueado no se despliegan en ningún navegador.

    Ya no sé que probar. Una ayuda por favor

    ResponderEliminar
  31. Mapkoc he probado con tu script y funciona sin problemas. Tendrás que buscar algún error en la parte HTML o en el CSS.

    ResponderEliminar
  32. No entiendo. La parte css y html no debería verse afectada por si estamos logueados en la cuenta de Google.

    De hecho, he sustituido todo mi css y html por los que ofreces de ejemplo en este post sin cambiar nada y ocurre lo mismo.

    No sé donde seguir mirando. Parece de duendes.

    ¿Que estoy haciendo mal?

    ResponderEliminar
  33. De hecho he dejado tu css y html para que puedas verlo http://www.madridhockeylinea.com/p/competiciones.html

    He probado a ver el blog con otra cuenta de Google y ocurre lo mismo.

    ResponderEliminar
  34. Debe ser tu conexión o tu ordenador Mapkoc. Acabo de ver tus pestañas y su contenido: "Contenido pestaña 1", "Contenido pestaña 2"...

    ResponderEliminar
  35. Hola Oloman!

    Una pregunta, habra otro js que cargue mas rapido? lo que pasa es que funciona todo muy bien pero en mi blog de wii4everybody.com el sidebar de la derecha tarda en cargar porque espera a que el simpletabs.js cargue primero xD
    Hay manera de modificar el .js quiza? o hay algo que lo alenta en mi blog?
    Gracias por tu ayuda!
    Ozl

    ResponderEliminar
  36. Hay muchos más Ozl y de hecho me parece que este no es de los mejores ni mucho menos, porque a mí también me tarda mucho. Buscando 'tabs' o 'pestañas' seguro que encuentras muchos. Si te da buen resultado alguno ya nos cuentas.

    ResponderEliminar
  37. Pregunta... ¿Se pueden poner links dentro de las pestañas?

    ResponderEliminar
  38. Olvidalo, ya vi como se hace, gracias de todas formas.

    ResponderEliminar
  39. no me funciona, me sale el código html, pero no me sale ni las pestañas ni se cierran y abren u.u

    ResponderEliminar
  40. OpeningsAnimes, necesitaría saber dónde está el código que no funciona para ver qué puede estar mal.

    ResponderEliminar
  41. creo que el problema esta en que tengo un orbit:slider de jquery porque cuando pongo los códigos de las solapas, no me funciona el slider

    ResponderEliminar
  42. Tengo una pregunta, como hay que hacer para colocarlo a mitad de la sidebar? ya que cuando la coloco a mitad del codigo (entre dos gadgets) me aparece un error, y no me deja ver la pagina.
    Desde ya muchas gracias.-

    ResponderEliminar
  43. OpeningsAnimes, no me extrañaría que fuera eso porque hay muchas librerías que no son compatibles por usar funciones con el mismo nombre que se interfieren entre sí.

    MaX, en un principio no te debería dar problemas crear un nuevo gadget HTML/JavaScript dónde insertar el código y luego moverlo a la parte de la barra lateral que te interese. Si pudieras concretar qué es lo que haces exactamente...

    ResponderEliminar
  44. buenas, no veo el contenido de las pestañas y las pestañas de mi web dejaron de abrirse también, donde está el fallo? mire desde otra computadora pero ocurre lo mismo.
    Te agradecería mucho que pudieras solucionarlo

    ResponderEliminar
  45. AnimeXtremo, el problema en mi caso es que el sitio dónde tenía alojado el script, había dejado de funcionar. Supongo que a tí te habrá pasado lo mismo. Ya he actualizado la entrada con una nueva dirección, pero como precisamente recomiendo allí, lo mejor es que lo alojes en un sitio bajo tu control.

    ResponderEliminar
  46. Nuevamente no se ven las pestañas correctamente, si es que no entiendo mal la idea seria separar todo un contenido en distintas partes las cuales se hacen visibles cuando apreto en una pestaña o boton no?

    ResponderEliminar
    Respuestas
    1. Pues sí. No sé que pasa pero esta última semana me falla. Lo raro es que lo hace intermitentemente. Hace como dos horas iba y ahora no.

      En fin, no le voy a dar vueltas porque estoy preparando un post con otro sistema creado con jQuery. Permanezcan atentos a su lector de feeds ;)

      Eliminar
    2. Estaré esperando con ansias.

      Eliminar
  47. Aca encontre algo parecido pero en ingles: http://bloggerstop.net/2008/12/how-to-create-multi-tab-widget-in.html

    ResponderEliminar
    Respuestas
    1. Realmente hay muchos scripts que hacen esa misma tarea, pero lo que tengo pendiente de publicar me gustó porque me pareció bastante más sencillo, más liviano y sin dependencia de scripts grabados externamente. Pero si no puedes esperar es comprensible, porque soy muy muy lento...

      Eliminar
    2. La verdad es que estoy algo ansioso, pero lo puse para ver si a vos te parecía interesante y tal vez escribieras al respecto, siempre es mejor una explicación en tu propio idioma. Pero si es más sencillo, mejor aun!

      Eliminar