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>
<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>
<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}
.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.
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:
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;}
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.
Y muchos más artículos interesantes si nos sigues en...
muy bueno hace tiempo buscaba unas gracias olo
ResponderEliminarTa lindo, se ve más bonito que el que tengo actualmente.
ResponderEliminarPero 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?
Sea, pero lo haré debajo para no enmarañar más el código.
Eliminarhola 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
EliminarHola. Me refiero a la parte CSS de la plantilla. También puedes añadir ese CSS desde Plantilla > Personalizar > Avanzado > Añadir CSS
EliminarMás info: CSS Básico.
Muy interesante. Lo tendré en cuenta para el rediseñamiento del año entrante en http://psicologia-terapias.com
ResponderEliminarPienso simplificarla aún mas.
Gracias por tu desarrollo en el área
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..
ResponderEliminara mi tambien me interesa esa idea.
EliminarNo 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?
Eliminarsi 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?
EliminarAh, vale. Si es eso no veo la forma de hacerlo, porque este sistema sólo oculta/muestra algo que está previamente cargado.
EliminarSe 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.
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.
ResponderEliminarHazlo 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.
Bueno Oloman Oloman; una duda.
ResponderEliminarYa 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.
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.
EliminarConclusión: Hazlo desde Edición HTML.
Alternativa: Cambia el # por un javascript:void();
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...
ResponderEliminarGracias por avisar de que lo solucionaste. Funciona perfecto y con tu enlace ya hay otra referencia para hacer esto.
ResponderEliminarPues sí; tuviste suerte de que pudiera hacerlo pronto. Espero que te sean útiles ;) Gracias.
ResponderEliminarComo 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
ResponderEliminarPues, 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")
EliminarBusque por muchas partes, pero ninguno se entendia, GRACIIASSS!!
ResponderEliminarinteresante, es una buena opcion para crear dos tipos de sistemas de comentarios.
ResponderEliminarBuena idea. Realmente sirve para meter cualquier cosa.
Eliminarhttp://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
ResponderEliminarNo hay mucho que explicar. Simplemente copia y pega esas líneas.
EliminarLa 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.
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 ...
ResponderEliminarme eche aqui toda la noche y al final para nada
pero lo estube buscando me rompi mucho la cabeza
ResponderEliminarQuizás uses Scriptaculous o Mootools y esas otras librerías dan problemas de incompatibilidad con jQuery. Compruébalo.
Eliminarquiero dejar mis respetos amigo la verdad es que brindas mucha ayuda si hay alguna forma para apoyarte o algo espero poder hacerlo :D
ResponderEliminarBueno sí... Puedes invitarme a algo, arreglarme el coche, pintar mi casa... :)
EliminarGracias, pero me lo paso bien con lo que hago. Si acaso que si te gustó el contenido del blog, lo recomiendes cuando te pregunten ;)
jajaaja que manzano amigo jaja listo amigo unas heladas estaria bn sigue con tu trabajo amigo :)
EliminarHola, 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¿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.
ResponderEliminarUna segunda opción sería contruir una primera pestaña sin contenido ni título ninguno.
Saludos Oloman! y feliz año nuevo :)
ResponderEliminarLo 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.
Resuelto! solo hicieron falta algunas horas más ;)
ResponderEliminarFerpecto. Con paciencia y el sistema de ensayo-error, se logran muchas cosas ;)
EliminarJaime 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.
Eliminarmuchas gracias migo muy bien explicado y muy sencillo ya lo anexe a mi proyecto
ResponderEliminarSó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 {}
ResponderEliminarHola 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?
ResponderEliminarmira mi blog es este http://otakuworldsite.blogspot.mx
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.
EliminarMuy 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?
ResponderEliminarSí. Es posible
EliminarVer 27.1 ;)
EliminarHola y enhorabuena por el post.
ResponderEliminarme 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
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.
EliminarFC el contenido lo metes en el HTML, fijate en el código fuente del ejemplo
ResponderEliminarOloman perdona la insistencia, te suena de algo esta posibilidad? sino sigo intentando ensayo - error... aunque hay riesgo de entrar en desesperación! jeje
ResponderEliminarLa duda era si se pueden poner pestañas dentro de una pestaña.
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é
EliminarHola 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
ResponderEliminarGracias 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 !
ResponderEliminarPues 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.
EliminarLo de los iconos sociales fijos se hace con position: fixed; Echa un vistazo a este post: POSITION
Muchas Gracias !!
EliminarHola, 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?
ResponderEliminarLa 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...
Eliminarntp 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">
EliminarOK. Recibido
EliminarHola 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:
ResponderEliminarhttp://solomacosx.blogspot.com/2013/02/star-wars-galactic-battlegrounds.html#more
Muchas gracias! me servirá mucho para realizar tutos!!
Me costo pero finalmente logre incorporar este gadget multitabs. http://nekokoshan3.blogspot.com
ResponderEliminarTengo 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?
Aunque funcionará en ambos sitios, lo correcto es incluir el estilo en la parte CSS. En Blogger esto es entre las etiquetas SKIN.
EliminarTambié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 ;)
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)?
EliminarEso ú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.
EliminarGracias por el aporte
ResponderEliminartengo 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?
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:
Eliminar$("ul.tabs li:nth-of-type(2)")
A ver si funciona...
Hola! necesitaria saber si podes ayudarme de buena onda!...
ResponderEliminarYo 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/
Hola. Hoy es el día de la ETIQUETA, porque ya llevo tres o cuatro respuestas diciendo casi lo mismo :)
EliminarTienes 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.
yo en lo unico que no entendi fue en esto - insertar entre las etiquetas SKIN... porfavor diganme en que no caxe esa parte!
ResponderEliminarSi 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.
ResponderEliminarAsi 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
EliminarAl fin pude ver tu blog :)
EliminarEn 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;
...
...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.
EliminarGracias 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
EliminarPodrí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.
Eliminarbuenas, 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",
ResponderEliminarHola. 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á.
EliminarLo 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.
muchas gracias, es para apuntar a otros archivos .php de mi web, lo probare ahora ;)
EliminarPorque en la parte de SKIN cuando coloco el codigo los comentarios de blogger quedan en medio de el contenido de las pestañas?
ResponderEliminarHola 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.
EliminarPerfecto Muchas gracias
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarAhora 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
ResponderEliminarHize 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.
Se quedaron en uno. No hay de qué y gracias por avisar de que lo arreglaste para que no tuviera que verlo para nada ;)
EliminarLo he visto y pienso que te vendría bien un cambio de color en las pestañas.
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.
ResponderEliminarMil gracias!
Pásame la dirección dónde tienes ese sistema de pestañas que si no lo veo no sé decirte.
EliminarHola 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?
ResponderEliminarMil gracias y un saludo!
Me refiero al contorno gris de las pestañas claro. Un saludo!
EliminarHola 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.
EliminarBueno, pues ya lo sabemos todos ;)
EliminarPues 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...
ResponderEliminarOye 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.
ResponderEliminarFí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).
EliminarOloman! 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¿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.
EliminarEn 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?
ResponderEliminarNo 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.
EliminarLas 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.
Hola, me parece muy útil. pero, ¿se puede meter el widget de las entradas más populares en una de las pestañas?
ResponderEliminarHola Julio. Sí que se puede poner, pero es algo más complicado.
EliminarLo 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.
Exelente me sirvio mucho! Gracias por este gran aporte, Saludos :3
ResponderEliminarOloman 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.
ResponderEliminarTe paso el ejemplo Braulio
ResponderEliminarfue 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.
Eliminarahhh ok, ya vi lo que hiciste en google+ gracias.
EliminarVosotros mismos... ;)
EliminarQue 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.
ResponderEliminarMi web es muy simple: http://doroteando.blogspot.com.es/.
Podrías decirme que me pasa??
Gracias
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.
Eliminarhola 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¿A qué llamas "menú vertical"? Y con lo otro de "crear" me pasa lo mismo... no entiendo lo que pides.
ResponderEliminarOloman 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?
ResponderEliminarEn 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)
EliminarNo tienes más remedio que editar en modo HTML evitando la pestaña Redactar del editor, o Blogger se carga el marcador.
:( 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.
EliminarDisculpa 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.
ResponderEliminarSi 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.
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.
ResponderEliminarDisculpa, 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
EliminarBien, pero sólo hay una caja con pestañas ;)
EliminarGrandí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!
ResponderEliminarJajaja... 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.
EliminarTodo 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.
ResponderEliminarHola oloman muy buen aporte me encanto .. pero tengo una duda me gustaria poner una flecha de siguiente y anterior asi como en este ejemplo:
ResponderEliminarhttp://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!
¿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.
EliminarHola, quisiera saber si se puede poner 2 tabs diferentes en una misma entrada
ResponderEliminarEjemplo :
VIDEO 1 Opcion 1 Opcion 2 ... Etc
y mas abajo otro
VIDEO 2 Opcion 1 Opcion 2 ... Etc
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í.
EliminarLo 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.
Me ha servido montones, muchas gracias por compartir, Funciona de maravilla. Todo excelente!
ResponderEliminarHola, como seria para que se vea igual que este:
ResponderEliminarhttp://rimangas.blogspot.com/2014/11/one-piece-manga-767-espanol.html#
Pues evidentemente haciendo uno igual que ese XD
EliminarBromas 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.
HOLA ESTABA TODO BIEN HASTA QUE TOPE CON ESTO AYUDA QUE PUEDO HACER ME SALE ESTO
ResponderEliminar----------------------------------------------------------------------
a href="https://www.blogger.com/blogger.g?blogID=1706598542083704133#tab3"
Y LO CABIA DE ESTA MANERA COMO EL DE ARRIBA
Eliminar----------------------------------------------------------------------------------------
href="javascript:void()tab3"
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.
EliminarEdita 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.
hola que tal!! gracias por tremendo aporte, mi duda es la siguiente:
ResponderEliminarcuando 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
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.
Eliminardisculpa 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
ResponderEliminarHola Juan. Efectivamente dos versiones distintas de jQuery pueden darte problemas. Usa sólo una de ellas y listo.
Eliminaramigo me agrada mucho, pero como puedo hacerlo responsive? es lo que me falta para dejarlo funcional en mi pagina. Muchas gracias
ResponderEliminar¡Deseo concedido!
EliminarMira la última actualización Diego ;)
tengo un problema con el tab. cuando introdusco los html dejan de funcionar varias cosas en mi blog. cuando introdusco estos codigos.
ResponderEliminarNo 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.
EliminarHola 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
ResponderEliminarSe 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.
EliminarSi 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
Gracias pero podrias ayudarme con el javascript o una pagina donde me ayude para saber como pasar el parametro url, gracias
EliminarYa 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.
EliminarY sobre páginas dónde expliquen eso hay muchas.
En el enlace tienes las mejores... y perdón por la broma ;)
¿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¿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.
EliminarNo, no es del gadget de páginas, ese lo eliminé.
EliminarEs 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.
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.
EliminarBueno, 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.
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.
ResponderEliminarEs lo más fácil ;)
EliminarComo 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
ResponderEliminarHola David. El problema está en el HTML que pones en la entrada.
Eliminar<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.
ola, como puedo hacerle para que los videos se adapten automáticamente al tamaño de la tab que he escogido? O_o
ResponderEliminarHola.
EliminarYo tengo publicados dos sitemas: Uno y Dos
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.!!
ResponderEliminarBlogger 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.
EliminarHola Buen Post, Me funciona pero pero me daña el Slider de la parte principal
ResponderEliminarHola. 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í
EliminarHola, 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...
ResponderEliminarNo 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.
EliminarCon respecto al resto del SCRIPT, pues no sé. Es posible que entre etiquetas SCRIPT funcione dentro de la parte HTML.
hola que tal tengo una duda amigo y si quiero hacer referencia a dos contenidos con un solo tab como lo haria
ResponderEliminar