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.
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.
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; }
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>
<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.
Y muchos más artículos interesantes si nos sigues en...
Muchas gracias por el recurso de Simpletab,,,super chevere.
ResponderEliminarHola 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?
ResponderEliminarAins... ailofyu una jartá^^
ResponderEliminarJusto 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!!
Anónimo, cómo dices es un recurso y como tal, debe ser usado cuando haga falta, ni más, ni menos.
ResponderEliminarRodry, 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 :)
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.
ResponderEliminarHola 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
ResponderEliminarGracias 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.
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.
ResponderEliminarMe gusta... Ya veremos cuando me pongo a experimentar con estas cosas de nuevo.
Un saludo, Oloman y compañía.
Gracias teacher!!!Há dias procuro esse recurso!
ResponderEliminarBesotes!
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...
ResponderEliminar¿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^^
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.
ResponderEliminarHernando, 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.
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.
ResponderEliminarPD: 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!
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
ResponderEliminarSi...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.
ResponderEliminarUna 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.
Pues hice pruebas y sí que es posible, pero ahora no recuerdo exactamente.
ResponderEliminarPienso 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...
Siiiii....Solo fue adicionar height y overflow...y guala.Gracias.
ResponderEliminarUn abrazo caluroso desde Barranquilla.
No funciona, funciona de a ratos. Gracias por la data igualemente
ResponderEliminarFede, 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.
ResponderEliminarHola 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.
ResponderEliminarMuchas gracias por tus aportes!
Laura, eso es un poco largo para explicar aquí, además de que no me resulta fácil hacerlo con detalle de manera simple.
ResponderEliminarDe todas formas, todo está basado en el efecto rollover, del cual puedes ver una entrada en este enlace:
Botones en movimiento
Saludos.
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...
ResponderEliminarGracias 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!
ResponderEliminarRicardo, 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?
ResponderEliminarOk Laura. Investigar, probar y equivocarse es la mejor forma de descubrir nuevas cosas.
Oloman,
ResponderEliminarCreo 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.
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!
ResponderEliminarhttp://esenciasdemi.blogspot.com/
vale...ya he descubierto como... xD haciendo más pequeñas las imágenes...disculpa las molestias!
ResponderEliminarTorturitas, 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.
ResponderEliminarRakel, no hay nada como hacer pruebas y más pruebas, y descubrir nuevas cosas uno mismo. Esas no se olvidan ;)
Algo falla en este buen invento.
ResponderEliminarEl 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
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:
ResponderEliminarETIQUETAS
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.
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.
ResponderEliminarCon 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.
Algo falla y no sé que es Oloman.
ResponderEliminarEl 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
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.
ResponderEliminarNo entiendo. La parte css y html no debería verse afectada por si estamos logueados en la cuenta de Google.
ResponderEliminarDe 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?
De hecho he dejado tu css y html para que puedas verlo http://www.madridhockeylinea.com/p/competiciones.html
ResponderEliminarHe probado a ver el blog con otra cuenta de Google y ocurre lo mismo.
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"...
ResponderEliminarHola Oloman!
ResponderEliminarUna 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
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.
ResponderEliminarPregunta... ¿Se pueden poner links dentro de las pestañas?
ResponderEliminarOlvidalo, ya vi como se hace, gracias de todas formas.
ResponderEliminarno me funciona, me sale el código html, pero no me sale ni las pestañas ni se cierran y abren u.u
ResponderEliminarOpeningsAnimes, necesitaría saber dónde está el código que no funciona para ver qué puede estar mal.
ResponderEliminarcreo 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
ResponderEliminarTengo 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.
ResponderEliminarDesde ya muchas gracias.-
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í.
ResponderEliminarMaX, 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...
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.
ResponderEliminarTe agradecería mucho que pudieras solucionarlo
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.
ResponderEliminarNuevamente 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?
ResponderEliminarPues 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.
EliminarEn 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 ;)
Estaré esperando con ansias.
EliminarAca encontre algo parecido pero en ingles: http://bloggerstop.net/2008/12/how-to-create-multi-tab-widget-in.html
ResponderEliminarRealmente 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...
EliminarLa 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