JMiur [E]

En la última entrada referida a solapas o tabs había un comentario de Malina en el que preguntaba si era posible colocar las categorias del blog dentro de esas solapas. Unos días después, Haîmat se sumaba a esa pregunta y la extendía, hablando de elementos en general y aportando un ejemplo.

En algún momento, hace ya tiempo, había mostrado una forma de incluir las etiquetas en solapas pero es una solución que, si bien funciona, nunca me convenció demasiado así que aprovechamos el ejemplo para intentar otro método que me parece más flexible.

El problema que surge para explicar esto es que no hay un solo método para incluir solapas, hay muchos, hay decenas de scripts y todas son diferentes aunque en general, tienen una estructura similar, en una lista ordenada (UL LI) se muestran las solapas y abajo, en distintos DIVs, se agrega el contenido de cada una de ellas.

Este ejemplo usará Fabtabulous que es uno de esos scripts que ya he utilizado alguna otra vez (más información)

Coloco entonces los scripts necesarios antes de </head>:
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype", &quot;1.6.0.3&quot;);
google.load("scriptaculous", &quot;1.8.2&quot;);
</script>
<script src='URL_fabtabulous.js' type='text/javascript'/>
Debajo de eso, el CSS que puede tener cualquier propiedad y que es lo que podemos personalizar.

<style type='text/css'>
#tabs-wrapper {
width: 320px;
float: right;
margin: 30px 0;
word-wrap: break-word;
overflow: hidden;
}
#tabs {
list-style-type: none;
margin: 0;
padding: 0;
}
#tabs li {
float: left;
list-style-type: none;
margin-right: 1px;
}
#tabs a {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background-color: #BBB;
color: #FFF;
float: left;
font-family: Arial;
font-size: 16px;
font-weight: bold;
height: 28px;
line-height: 30px;
outline: none;
margin: 0;
padding: 0 8px;
text-decoration: none;
}
#tabs a.active-tab {
background-color: #EEE;
color: #444;
outline: none;
}
.demoTabs {
color: #444;
}
.panel {
background-color: #EEE;
clear: both;
display: none;
padding: 10px;
}
.panel.active-tab-body {
display: block;
}
</style>

Colocar contenido en una solapa es sencillo si se trata de códigos escritos por nosotros; en la primer parte van las solapas en si mismas con sus títulos:
<ul id='tabs'>
<li><a class='active-tab' href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
Debajo, el contenido de cada una:
<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>
<div>El contenido de la primera solapa</div>
</div>
<div class='panel' id='tab2'>
<div>El contenido de la segunda solapa</div>
</div>
<div class='panel' id='tab3'>
<div>El contenido de la tercera solapa</div>
</div>
</div>
El problema surge porque no podemos colocar un elemento de Blogger ya que los widgets deben estar en una sección y una sección sólo puede contener widgets:
<b:section class='unaClase' id='unNombre'>
  ... aquí no nos permiten agregar códigos ...
<b:widget id='otroNombre' locked='false' title='TITULO' type='TIPO'/>
  ... aquí no nos permiten agregar códigos ...
</b:section>
Pero si podemos armar las cosas de este otro modo:
... aquí podemos agregar códigos ...
<b:section class='unaClase' id='unNombre'>
<b:widget id='otroNombre' locked='false' title='TITULO' type='TIPO'/>
</b:section>
... aquí podemos agregar códigos ...
Así que podríamos armar las solapas de ese modo, creando secciones en cada una de ellas y de tal modo, podríamos mover los elementos que ya tenemos o bien agregar otros directamente desde la ventana de Diseño | Elementos de la página. Para eso, vamos a colocar las solapas en un DIV al que le daremos las mismas propiedades que a la sidebar y que en este caso, para ser original, tendrá como nombre id='tabs-wrapper':
<div id='tabs-wrapper'>
<ul id='tabs'>
<li><a class="active-tab" href="#tab1">Tab 1</a>
<li><a href="#tab2">Tab 2</a>
<li><a href="#tab3">Tab 3</a>
</ul>
<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>
<b:section class='solapa1' id='solapa1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='panel' id='tab2'>
<b:section class='solapa2' id='solapa2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='panel' id='tab3'>
<b:section class='solapa3' id='solapa3' maxwidgets='1' showaddelement='yes'/>
</div>
</div>
</div>
Ahora, lo que veremos en la ventana de edición será algo así:


Y haciendo click en las solapas, accederemos a cada una de ellas, de la misma manera que ocurre en el blog y podremos agregar un gadget cualquiera.

Obviamente, puede haber detalles que modificar o adaptar de acuerdo a cada elemento pero, para eso, cada sección tiene su propio ID y su propia clase así que deberías ser sencillo hacerlo o tan complicado como hacerlo en la misma sidebar.

21 comentarios:

Unknown  

Fantastico JMiur, creo que es algo muy útil para tener organizados ciertos elementos y facilmente accesibles.

Graciasssssss

Responder
JMiur  

Espero que sirva, paree engorroso pero en realidad no lo es tanto.

Responder
Unknown  

mmm... es un poco tarde para probarlo jejeje pero creo que las vendré a ver mañana :), lo que me preocupa es que ciertas librerías son muy pesadas y mi blog se demora en cargar :$

besotes ronroneados J ^_^

Responder
Unknown  

pd: uf! moderando? espero que sea por precaución y no por nada malo
besos prrrr ^_^

Responder
JMiur  

Es verdad lo de las librerías, Pau. No hay un consejo único para eso, tienen sus pros y sus contras.

Responder
TartaS EncantadaS  

Hola jmiur, me gustaria que me pudieras ayudar, no tiene nada que ver con el post, mis post no se actualizan en aquellos blogs que me incluyen en su lista de blogs, esto me hace ademas de visitas porque a ellos no les aparecen mis publicaciones nuevas, publico cosas y nadie se entera. ¿a que debe ser debido? muchas gracias

Responder
Antony  

Me parece excelente... :O Lo probare... :D Saludos!

Responder
JMiur  

Las Pacas:
No veo nada en tu blog que esté mal. Lo tengo en mi lector de feeds y se actualiza correctamente. Lo digo porque es justamente eso, los feeds, lo que utilizan esos gadgets. Lamentablemente, no tengo ninguna otra respuesta. Deberían funcionar correctamente.

Responder
Unknown  

hola 1 2 1 2 probando, vengo a corroborar si este bastardo todavía está moderando para trolearle su basura de blog 1 2 1 2 :D

Responder
JMiur  

Estimado Kattia o jαvιєя_ɢ , vaya uno a saber qué eres ya que tu perfil no está disponible:
http://www.blogger.com/profile/10615489983691743880

Aunque no lo veas, uno de tus comentarios está allí arriba, no es que me haya olvidado de eliminarlo lo he dejado a propósito como recuero, lamento que no puedas gozarlo.

No voy a darte consejos que no entenderías ni voy a insultarte porque no te lo mereces. Ni siquiera puedo sentir pena. Sólo me aburres.

Soy un sobreviviente. Demasiado viejo para que las chiquilinadas de un adolescente con las hormonas alteradas pueda perturbarme. Me da igual si denunciarte tiene algún efecto o no, no me importa, sacarás otra y listo.

Tampoco me importa tener que moderar los comentarios, me tiene sin cuidado, no me hará ni mejor ni peor por una sencilla razón, sólo escribo para mi mismo y lo demás es un regalo que agradezco pero no es el fin. Podría tener un blog sin comentarios y seguiría haciendo lo mismo que ahora porque no necesito que me presten atención, me basta sentirme feliz y lo soy.

Ni siquiera te hablo a ti. Me hablo a mi mismo y debo declarar, sin la menor duda, que no hay nada ni nadie que pueda impedir que siga haciendo lo que hago, aquí o en cualquier otro lado porque soy libre y eso es todo lo que necesito.

Unos cuantos clicks y la basura ha desaparecido. Es triste tener una vida así, donde el único destino posible es desaparecer en la nada.

CLICK y allá fue, sólo falta vaciar la papelera.

Responder
Raúl  

JM Por favor ayudame hize lo de lightwindow en mi blog de pruebas y me funciona bien, pero quiero cambiarle a español como lo hisiste tu. Y para eso uso el lightwindowVagaBanana2.js como lo hisiste. Pero cuando doy click sobre la imagen se extiende en todo el ancho de la pantalla como soluciono este problema???
este es mi blog de pruebas:
http://prubas-ravc.blogspot.com/

Gracias Jm

Responder
JMiur  

Pués no sabría decirte, Raul, es algo que no puede verse online y no hay forma de editar un script comprimido. Lo evidente es que está calculando mal el tamaño de las imágenes.

Usa el script original y trata de buscar los textos allí.

Responder
Raúl  

gracias JM donde puedo conseguir el script original? y con q programa tengo q editarlo. O basta con un editor de texto?

Responder
JMiur  

En el post de LightWindows hay dos ZIPs. Uno contiene los scripts originales. El otro contiene los mismo pero donde ya se han alojado las imñagenes necesarias. Allí, no está el comprimido que estás usando ahora.

Responder
Raúl  

Gracias Jmm, por ayudar y disculpa q insista pero el script para cambiarle a español, no debe ir con otros codigos??, por q en un script no puede ser q en unos blogs funcione y en otros no, si estuviera mal el script fallara en todos los blogs. Esa es mi duda.

Responder
Haîmat  

¡¡AHHHH, Te adoro!! Muchas gracias, de verdad no sabes que alegría me has dado ^^

Responder
Jaime Trujillo Escobedo  

Genial JMiur! la verdad es que es muy útil saber esto ;) y además no es difícil :D un graan saludete ;)

Responder
:D  

:( esto realmente me interesa mucho por que asi mi blog se vera mas sencillo, pero no me sale bien. podrias ayudarme?

Responder
JMiur  

Merangelis:
Cuñentame que has hecho y dónde está el problema.

Responder
SEGArcadia  

Hola, JMiur. Antes de nada, gracias una vez más por tu dedicación.
Estoy probando este "viejo" metodo de solapas o tabs, pero hay algo que no funciona.
He visto que en tu blog de ejemplo (http://vpsolapas.blogspot.com), aunque aparecen todas las solapas, solo se puede seleccionar la primera, al pinchar sobre el resto de solapas no aparece el contenido de las mismas... ¿qué es lo que está mal?

Responder
JMiur  

Listo, Juan. Lo que pasa es que es una entrada vieja y el archivo con el script hace rato que lo mudé y ahí quedó la URL vieja así que ya está cambiado y funcionando :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR