JMiur [E]

Como el espacio disponible en una página web es relativamente limitado y en Blogger no tenemos la posibilidad de insertar páginas especiales, una práctica más o menos generalizada es ocultar determinada información y hacerla visible cuando hacemos click en algún botón.

Por lo general, esto hace que el contenido se desplace hacia arriba o hacia abajo, expandiendo y contrayendo un bloque cualquiera. Para esto hay varias técnicas, alguna son sencillas, otras más complicadas.

Utilizando ese mismo criterio y librerías externas, hay métodos más sofisticados como la creación de las llamadas tabs o solapas es decir, una serie de bloques superpuestos, cada uno de ellos con un contenido diferente y del que sólo vemos uno a la vez.

Desde ya, hay que decir que esto no aliviará la carga de la página, los datos están allí, no los vemos porque los marcamos como ocultos y justamente eso es lo que permite que pasar de una solapa a otra sea un proceso rápido.

idTabs es una opción que funciona con el framework jQuery. Su uso es bastante sencillo, descargamos el script, lo alojamos en un servidor e insertamos el código en el encabezado de la plantilla, antes de </head>:
<script type="text/javascript" src="URL_jquery.idTabs.pack.js></script>
Luego, cualquier enlace de tipo <a href="#nombre"> que esté dentro de un elemento que tenga como atributo class="idTabs", será tratado como una solapa:
<ul class="idTabs">
<li><a href="#solapa_1">ENLACE</a></li>
<li><a href="#solapa_2">ENLACE</a></li>
</ul>
<div id="solapa_1">el contenido de la primera solapa</div>
<div id="solapa_2">el contenido de la segunda solapa</div>
Hay otras opciones; por ejemplo, los desarrolladores de Prototype han creado un pequeño script que puede agregarse a su librería. Como en el caso anterior, descargamos Control.Tabs y lo agregamos a la plantilla. Si ya usamos prototype, basta poner:
<script type="text/javascript" src="URL_control.tabs.2.1.1.js></script>
Sino, colocamos ambos:
<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_control.tabs.2.1.1.js"></script>
El código HTML es similar al primer ejemplo:
<ul id="nombre">
<li><a href="#solapa_1">ENLACE</a></li>
<li><a href="#solapa_2">ENLACE</a></li>
</ul>
<div id="solapa_1">el contenido de la primera solapa</div>
<div id="solapa_2">el contenido de la segunda solapa</div>
<script>
new Control.Tabs('nombre');
</script>
Claro que aún hay otro mucho más sofisticados pero, en lo personal, el que más me ha gustado es Fabtabulous que también usa Prototype. Su ventaja es que es muy sencillo y todo el diseño de las solapas lo hacemos con CSS.

Descargamos el ZIP y allí tenemos un demo y los scripts necesarios. Si ya usamos Prototype, sólo necesitamos fabtabulous.js. Lo alojamos en un servidor y lo agregamos, como siempre, en algún lugar antes de </head> o, eventualmente, al final de la plantilla, justo antes de </body>:
<script type="text/javascript" src="URL_fabtabulous.js></script>
El código HTML es simple. Utilizamos una lista (UL) para colocar los enlaces de las solapas y le agregamos el atributo id="tabs". En cada item de la lista (LI), colocamos un enlace a las solapas y, a la primera, esa que aparecerá visible por defecto, le agregamos la clase class="active-tab":
<ul id="tabs">
<li><a href="#solapa_1" class="active-tab">ENLACE 1</a></li>
<li><a href="#solapa_2">ENLACE 2</a></li>
  <li><a href="#solapa_3">ENLACE 3</a></li>
  <li><a href="#solapa_4">ENLACE 4</a></li>
</ul>
Debajo, lo mejor es crear un bloque general y dentro este, cada una de las solapas a las que conviene establecerles una clase CSS. Como en el código anterior, a la primera le adosamos una clase especial llamada active-tab-body para diferenciarlas del resto:
<div class="demoTabs">
<div id="solapa_1" class="demoSolapa active-tab-body">el contenido</div>
<div id="solapa_2" class="demoSolapa">el contenido</div>
<div id="solapa_3" class="demoSolapa">el contenido</div>
<div id="solapa_4" class="demoSolapa">el contenido</div>
</div>
Si colocamos esto en la sidebar o incluso en un post, no veremos otra cosa más que una lista común y corriente. La clave es definir las propiedades CSS de esos elementos y clases. Lo hacemos agregando el estilo en la plantilla, por ejemplo, a continuación del script.

Este es el esquema general del ejemplo:
<style type="text/css">

#tabs { /* quitamos las propiedades por defecto de las listas */
height: 32px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}

#tabs li { /* mostramos los items uno al lado del otro */
float: left;
}

#tabs a { /* diseño gráfico de los enlaces */
background-color: #101921;
border:1px solid #FAEBD7;
color: #777777;
float: left;
margin: 0 0 0 3px;
padding: 5px 10px;
text-decoration: none;
}

#tabs a.active-tab { /* un diseño diferenciado para la solapa activa */
background-color:#A52A2A;
border:1px solid #FAEBD7;
color:#FFFFFF;
}

.demoTabs { /* propiedades comunes al contenido de todas las solapas */
color: #F2F2F2;
}

.demoSolapa { /* por defecto, todo el contenido está oculto */
background-color: #362C18;
clear: both;
display: none;
height:125px;
padding: 10px;
}
.demoSolapa.active-tab-body { /* excepto la primera */
display: block;
}

</style>
Por supuesto, puede usarse cualquier tipo de diseño, usar imágenes como fondos, etc. En cuanto al contenido, no parece haber demasiadas restricciones y tampoco hay limitaciones en cuanto a la cantidad de solapas.


id="tab1"
El contenido de la primera solapa
id="tab2"
El contenido de la segunda solapa
id="tab3"
El contenido de la tercera solapa
id="tab4"
El contenido de la última solapa

54 comentarios:

literatura  

Hola.. tengo una duda sobre las posibilidades de estos metodos (o capaz que hay otro)
Hay alguno donde el div oculto se expanda en alto (height) de acuerdo al contenido que contiene?

Es decir: si contiene un texto con 5 lineas se más chico que si contiene un texto de 20 lineas, ambos div con el mismo ancho.

Responder
Luzbelito  

2 cosas que me dan duda, 1º el zip de donde lo bajo??

2º cuando te refieres a enlace a que te refieres??

gracias.

Responder
Eduardo Peinado  

Si Maradona fue el Dios del fútbol, tú eres el Dios del Blogger.

Jeje.

Un abrazo.

Responder
JMiur  

literatura:
Sí, eso puede hacerse de dos maneras. En este ejemplo, la altura es fija y es definida así:

.demoSolapa {
height:125px;

Podría eliminarse esa propiedad

1. De esa manera, la altura se adaptaría al contenido de forma automática. En ese caso, la lógica sería poner el contenido de cada solapa dentro de un DIV y, darle propiedades a cada uno.

2. Otra posibilidad es colocar alturas fijas diferenciadas para cada solapa, por ejemplo:

<div id="solapa_2" class="demoSolapa"
style="height:100px;">el contenido</div>
<div id="solapa_3" class="demoSolapa"
style="height:300px;">el contenido</div>

Luzbelito:
Maravilloso, me olvidé de poner el enlace, ya está corregido. El ZIP está ACÁ

Enlace es todo aquello sobre lo que podemos hacer click. Lo creamos con la etiqueta <a>:

En <a href="xxxxx">HACER CLICK ACÁ</a> sería un texto (el texto HACER CLICK ACÁ). Y en:

<a href="xxxxx"><img src="imagen"/></a>

el enlace sería la imagen.

Eduardo:
Gracias, pero ... no exageres :D

Responder
Gem@  

El resultado es genial supera con creces un menú ya que se puede personalizar el espacio a mostrar.
Puede que Eduardo exagere yo diría que eres lo máximo ;)

Responder
Jmunser  

Sigo flipando...
Un saludo y mi más profunda admiración.
¿Sigo?,¿no vivo?,¿vivo sin vivir en mí?...
No sé si mandarte a...
¿Otra noche más de insomnio?
¡NOOO!!
Me tienes loco! Seguro que es magia, ¿no lo entiendo?
Gracias
Jmunser

Responder
JMiur  

Es realmente muy interesante para usar en una sidebar, por ejemplo ya que el espacio es limitado. Me alegra que te guste, Gem@ :D

Jmunser:
Jajajaja, ten paciencia y verás que es sencillo.

Responder
literatura  

Gracias... ahora mismo no tengo tiempo, pero tengo una pagina donde lo pienso aplicar... ya que es muy poco contenido y debe ser muy simple y esto me viene de maravillas..

ahh, dice literatura por el openid, pero me llamo luis.

saludos
gracias

Responder
JMiur  

Bien Luis, espero que te animes a usarlo, es sencillo de manejar.

Responder
Roberto Caamaño  

¿Y se puede hacer con videos?

Responder
JMiur  

En principio, sí, con cualquier código HTML.

Responder
La Blogueria  

Hola, ¿esto es lo que usas para mostrar los resultados de la búsqueda en tu blog? Me gusta mucho el sistema.

Gracias!

Responder
JMiur  

Es y no es. No estoy usando este script pero la idea es la misma, tener algo algo visible, algo oculto y permutar entre ambos.

En el caso de los elementos de la sidebar es un poco más engorroso porque algunos son widgets que no controlamos pero se puede.

¿Debería explicarlo un poco, verdad?

Responder
guydo  

como poner los archivos , los post y los comentarios en esas solapas , algo como este blog
http://statementzc.blogspot.com/

Responder
JMiur  

En ese caso particular, está usando un script llamado Tabber.

Lo que se ve:Posts destacados, Enlaces y Archivos, aparentan ser listas. Como está colocado en un elemento HTML, yo diría que está hecho a mano, escribiendo esos enlaces.

Responder
KyubiT  

Me quedó de perlas este "script".

Me costó bastante acomodarlo como yo lo quería, pero al final lo logré xD...

Se agradece el dato, ya que no pude hacer funcionar tabber. (pero si en mi blog de pruebas :( ) salu2

Responder
JMiur  

Paciencia, si funciona en uno debería funcionar en el otro :)

Responder
Mandelrot  

Hola JMiur, he instalado fabtabulous y funciona perfectamente (muchas gracias), pero tengo la misma duda que Guydo: aparte de hacerlo a mano uno por uno, ¿se pueden introducir contenidos automáticos?

Aunque la pregunta es en general, por poner mi ejemplo concreto (link) llevo un laaaargo rato estrujándome la cabeza a ver cómo meto en una solapa las etiquetas del blog. He probado a crear un widget de 'labels' y copiar el código pero no funciona (demasiado bonito para salir bien), he intentado programar yo desde cero, Google parece que por una vez no tiene todas las respuestas, y al final nada. Seguramente me hubiera costado menos tiempo hacerlo a mano que todo este trabajo, pero no quería tener que pensar en ello cuando cree nuevas etiquetas...

Volviendo al caso general que es lo que interesa a todos, como en el blog que cita Guydo, hay otras posibilidades además de las tags. Aunque ellos lo hayan hecho a mano, ¿hay alguna solución más práctica y elegante? ¡Muchas gracias otra vez!

Responder
JMiur  

Entiendo tu idea, Mandelrot.

Diría que, una cosa es lo que se ve en el blog citado; eso, sin duda está hecho a mano, más o menos con el mismo trabajo que me lleva a mi hacer los índices de este blog. Ahí, no me parece que haya muchas opciones para automatizar las cosas, diría que ninguna :)

Otra cosa es colocar las etiquetas dentro de una solapa cuando usas un script como fabtabulous. Esto, en principio, me parece que puede hacerse aunque, probablemente, requiera inventar algún tipo de script.

Déjame pensar en el asunto y vamos a ver si se me ocurre la forma de engañar a Blogger :)

Responder
Mandelrot  

En el caso de las etiquetas que me ha hecho sacar humo por las orejas todo el día, yo estaba pensando que quizá podría usar el script de la nube de tags -es una idea nada más, sólo sé que existe pero ni conozco cómo funciona- y poner ése código allí; no estarían ordenadas pero estarían, algo es algo.

De todas formas es curioso que, con lo escaso que es el espacio en una sidebar, por más que he buscado por todas partes parece que en Blogger nadie parece interesarse por algo así; no es que los expertos no sepan resolverlo, es que ni siquiera he encontrado preguntas al respecto. En WordPress se ve mucho, ¿será porque exige que el usuario se meta más en el código y el conocimiento ha creado la necesidad y su solución?

En cualquier caso, echaré un vistazo a la nube de tags a ver y si no lo haré a mano... Tampoco es para tanto y nadie se va a enterar, pero ¡qué feo! Gracias de nuevo...

Responder
JMiur  

Así, pensando en voz alta, se me ocurren dos posibilidades.

La primera es utilizar el elemento Labels, con o sin nube y ver si el resto de los divs de las solapas, puede ubicarse allí. El problema es que la lista de etiquetas no pude leerse fácilmente si no es fuera de ese elemento.

La segunda es usar parte de lo que experimenté con aquí.

Esto es, leer las etiquetas con JavaScript en un elemento Labels que tengamos oculto, y luego usar esos datos para colocarlos en cualquier otra parte de la sidebar.

Lo más sencillo, sería lo primero así que, yo empezaría por allí.

Responder
Mandelrot  

Hum, ¡eso es lo que se llama una respuesta muy densa en pocas palabras! :-D

Aquí hay bastante material para investigar, me pondré a aprender cómo demonios se puede hacer todo esto. Si encuentro algo avisaré, aunque ya no me queda mucha paciencia para este detallito -tengo mucho más que hacer- y estoy a dos pasos de hacerlo a mano...

Responder
Mandelrot  

(Disculpas para los lectores menos expertos porque esto es un poco técnico, pero hay que probar estas ideas para descubrir cosas nuevas y luego dárselo a los demás ya "mascado").

Bueno, éste es el resultado de la "pelea" con Blogger:

La primera posibilidad que sugieres me ha hecho combinar el código de las pestañas en un artilugio del tipo "label" (se ven las pestañas pero no funcionan al hacer click sobre ellas) y luego probar el código del loop de las etiquetas en un artilugio HTML (las pestañas funcionan pero no se ve la lista de etiquetas; y si pongo texto en medio del código del loop se ve el texto incluso, pero la lista no aparece). Según Blogger además es obligatorio declarar el tipo de artilugio y tiene que ser de los ya existentes -y cada uno hace unas cosas y otras no las hace-, así que si hay una forma de salirse de lo que ofrece cada tipo yo no la he descubierto.

Y vamos, la segunda posibilidad me ha hecho pensar mucho y he googleado a ver si aprendía a trabajar con javascripts -o al menos si encontraba algo que me sirviera-, intuyo que ahí puede estar la solución pero se me escapa completamente; como no sé cuánto puedo tardar en aprender lo que me hace falta y se me acumulan otras tareas no tengo más remedio que dejarlo aquí de momento y -con mucho pesar- hacer la lista de etiquetas a mano.

Así que el resultado de este partido es Blogger 1 - Mandelrot 0, veremos si en el futuro puedo jugar la revancha... Te avisaré si descubro algo, gracias una vez más

Responder
JMiur  

Sobre le primer método, eso de "se ven las pestañas pero no funcionan" es sobre lo que tenía dudas, probablemente tenga solución pero, no estoy seguro. Lo otro, poner el loop en otro elementos, es cierto, no funcionará porque ciertos datos sólo son legibles dentro de cierto elementos; las etiquetas es uno de ellos, estas, sólo son accesibles en un elemento Label.

El segundo método, ese sería posible pero claro, habría que hacer todo en JavaScript, de allí lo engorroso del asunto.

Digamos que el partido no ha terminado y veremos si es posible dar vuelta el resultado; me parece un tema muy interesante así que trataré de ver si encuentro algo de tiempo para encontrarle la vuelta.

Responder
JMiur  

Mandelrot: ULTIMAS NOTICIAS

Creo que el problema está resuelto. Lo he puesto en mi blog de pruebas para que veas un ejemplo.
http://jmiur.blogspot.com/

En la sidebar, es el elemento TABS + ETIQUETAS. Es sólo la copia casi textual del ejemplo de este post y haciendo click en la TAB 2 verás las etiquetas de ese blog.

Parece sencillo de hacer y no creo que tengas problemas en implementarlo. Prometo escribir la explicación detallada y publicarlo mañana.

Creo que has tenido una muy buena idea porque puede quedar muy bien y ahorrar espacio :)

Responder
Mandelrot  

Sin haberlo visto todavía: ¡¡genial!! Ya imaginaba yo cuando te pregunté que si tú no tenías una solución es que no existía... Hahaha

Pero la idea no ha sido mía, de hecho lo que me sigue extrañando es que hayamos estado nosotros hablando de esto y que nadie hasta ahora lo hiciera antes. En WordPress esto es lo más normal del mundo, las plantillas con solapas son súper prácticas y es una cuestión superada hace tiempo.

De hecho esto me hace pensar en por qué WP tiene bastantes ventajas técnicas sobre Blogger: la mayoría de los usuarios de WP ya se tienen que molestar en aprender cosas avanzadas para gestionar sus sitios, eso quiere decir que hay más gente moviéndose a un nivel más profundo y con capacidad para ir "un pasito más allá" de lo que ya hay. Sin embargo en Blogger el sistema te obliga menos a "pensar", así que son pocos los que hacen ese ejercicio por otras razones que no sean la pura necesidad (el ejemplo de Linux vs Windows también). Si esto es así, el sistema para el que "trabaje" más gente tendrá más tendencia a ser técnicamente más avanzado, por más que haya otras ventajas que también pesen a la hora de decidir con cuál quedarse.

(Creo que me equivoqué de post para colocar este comentario... :-p)

En fin, estudiaré el ejemplo en tu blog de pruebas (lo tomaré como una clase online) y leeré tu "compilación" del asunto cuando la publiques. Como conclusión creo que es indiscutible que, ya que los programadores de Blogger están condenados a ir por detrás de la competencia, es sólo gracias a gente como tú que este sistema logra estar a la altura de los mejores...

Responder
JMiur  

Todo lugar es bueno para decir cosas interesantes :D

Blogger vs Wordpress ... un tema sobre el que tengo borradores escritos hace ya tanto tiempo :) es hora de volver a ellos. Ahora, le has agregado un tema extra. Tienes la rara habilidad de hacer que mi cabeza funcione en otra dirección ... eres una muso/muso :D

Es cierto que se usan solapas para hacer esto. Es más, uso el mismo script en mi blog de WordPress :D

Hoy (mañana) estará publicado. No lo hago acá porque escribir códigos es engorroso pero, básicamente ha sido meter las solapas en el elemento Labels para ver si funcionaban y luego, poner en una de esas solapas el código del loop de Blogger.

Responder
Mandelrot  

De todas las cosas -la mayoría malas pero alguna buena- que me han llamado en mi vida, lo de "muso" sí que es de largo lo más original... :-D

Tu solución me ha sorprendido porque eso lo intenté yo y no funcionó; encontré varios mensajes distintos de error de Blogger cuando iba a previsualizar la plantilla, del tipo "el elemento tal no puede ir en un elemento cual" y otros; probé con todas las combinaciones que se me ocurrieron -y algunas otras que aparecieron casi por accidente- pero parece que me faltó la buena. Espero leer mañana la solución...

...Y espero leer también más sobre tus opiniones sobre Blogger y WP, yo tengo pendiente también analizar esa cuestión -aunque induciéndola al proceso general de "por qué a veces perdemos la capacidad crítica, o por qué mi hijo es más guapo que los demás"- pero primero tengo que acabar diseño y funcionalidades para mis páginas, y en el blog que tendré para reflexiones personales ya tengo otros temas en la lista; "hay más días que longaniza", dicen.

A ver si esto va a ser un "Blogger 1 - Mandelrot 2" en la prórroga y gracias al árbitro...

Responder
MotorolaTelmex  

Hola JMiur ¡Finalmente encontré el post que necesitaba! En un site encontré una plantilla XML que me gustó y quise poner en mi blog. Ya tiene el código de las tabs incorporado, pero no sé cómo desarrollar el contenido de éstas y asignarles un link propio. Entiendo que deben ser páginas separadas...
Debo diseñarlas aparte? Otros blogs? Auxilio!

Responder
JMiur  

Tendría que ver como es la plantilla a la que te refieres pero, en principio no hace falta usar páginas separadas.

Justamente de eso se trata, el contenido se coloca normalmente y el script de las solapas lo que hace es mostrar sólo uno de ellos cada vez que haces click, ocultando al resto.

Coloca la plantilla en tu blog o en uno de pruebas y me avisas. Suele ser una cosa sencilla de hacer.

Responder
Claudio - Poca Tinta  

Es similar a uno que vi en varios blogs de Wordpress, se llama 'Domtab'.

Crees que se pueda aplicar el 'Link Domtab' a blogger.

Saludos amigo.

Responder
JMiur  

No lo he probado, Claudio pero diría que si. Lo marqué para verlo. En realidad, hay varios modelos. Este parece un script normal así que no debería haber inconvenientes.

Responder
Manuel de la Fuente  

Hola, ¿me podrías ayudar? Quiero usar Fabtabulous pero tengo problemas con el CSS, no logro que las pestañas llenen el ancho de la sidebar (queda un espacio vacío a la derecha de "Mis perfiles") y se ve horrible en cualquier navegador que no sea FF. Te dejo la dirección de mi blog de pruebas: http://manueldelafuente2.blogspot.com/

El gadget es el que está en la sidebar derecha, debajo del de Twitter.

Y estas son las definiciones que estoy usando:

#tabs {
list-style-image:none;
list-style-position: outside;
list-style-type:none;
}
#tabs li {
float:left;
}
#tabs a {
border-left:1px solid #91A7B4;
color:#4284C6;
cursor:pointer;
float:left;
height:19px;
margin:0 -4px;
padding:1px 6px 2px 6px;
text-decoration:none;
background:transparent;
font-weight:bold;
}
#tabs a:hover {
color:purple;
}
#tabs a.active-tab {
color:#003366;
cursor:default;
background:#FFF;
border-left:1px solid #91A7B4;
}
.demoTabs {
}
.demoSolapa {
clear:both;
display:none;
padding:6px 2px 2px;
}
.demoSolapa.active-tab-body {
display:block;
}

Gracias de antemano. :)

Responder
JMiur  

Da la impresión que todo es producto del margen negativo colocado en:
#tabs a donde dice margin: 0 -4px;
Eso provoca ese desorcden ya que se superponen las solapas.

Y ese margen negativo, parece que fue puesto para compensar otros márgenes que ya tiene el elemento:
.widget-content { margin-left:2px; margin-right:2px; }
.sidebar .widget {
padding-left:1px;
.......
}

Con esos valores, el espacio interior queda reducido y de allí que no pueda cubrirse. Ponerle el valor negativo no lo solucina ua que los navegadores lo interpretan distinto.

Vas a tener que, o aceptar eque el espacio interior es menor o bien quitarle todos esos márgenes y paddings que se van sumando unos a otros.

Responder
Manuel de la Fuente  

Efectivamente, era por eso. Quité todos los márgenes y paddings y ahora se ve perfecto. :) Gracias de nuevo.

Responder
Agos RC  

Buenas, una consulta les hago si no es molestia. Yo tengo un blog con dos amigas mas; nos gustaría que haya 4 solapas: una solapa para cada una de nosotras y una solapa principal o general. En cada una de las solapas individuales, nos gustaría que se muestren únicamente los posteos y gadgets agregados por "la dueña de la solapa" y en la general todo "mezclado". ¿como se hace eso? ¿que enlaces debería poner? ¿es posible hacerlo? Muchas gracias.

Responder
JMiur  

Agos RC:
Pués no se me ocurre qninguna manera de poder lograr algo semejante en Blogger.

Responder
He Dicho NO!  

Hola, nose si este post es muy viejo. Pero estoy usando el "fabtabulous" correctamente con videos de youtube. EL problema que tengo, es que si voy al video 1 y luego paso al video 2, el 1 sigue reproducinedose; si voy luego al video 4, el video 1 y 2 siguene ejcutandose.... sabes por que pasa esto ? Segui las instrucciones y baje el ZIP y lo agregue al sitio, o sea, me anda todo bien salvo esto que parece faltase algo no ?... bueno gracias. El sitio para verlo es http://www.hedichono.com.ar/videostemp.php

Responder
JMiur  

Eso es algo que ocurre en Internet Explorer. No pasa en otros navegadores. Debes detenerlo y luego ver otro porque, en realidad, es similar a tener todos en la misma página y hacer Play en varios.

Responder
Bilosony2™  

Y esto lo podriamos hacer en las entradas. Te explico e tenido la idea de querer poner las entradas en forma de tabs que la péstañas sean los titulos etc los mismo que el ejemplo del post nada mas que contengan una entrada por pestaña. :)

Se podria hacer eso?? no necesariamente con el ejemplo que muestras tu en este post.

Saludos!!!

Responder
JMiur  

Supongo que si se podría ya que sólo es un tema de CSS.

Responder
RICARDO  

HOla disculpa no me salio bien algho hice mal creo k no se como se consigue la direccion del alojamiento del scrpt lo aloje en google site pero osea no se cual direccion se debe poner.

Responder
JMiur  

Ricardo: es el enlace que figura como descarga del archivo en si mismo. Fíjate en esta entrada.

Responder
javi  

hola keria saber como usarlo pero en forma vertical

Responder
JMiur  

El diseño es así; tendrás que experimentar cambiando propiedades y ver qué pasa.

Responder
an  

Hola, quería saber como funciona cuando se quiere poner DOS o MAS (2 o +) bloques de contenido con solapas dentro de un mismo html. Probé pero sólo funcionan las solapas para el primer bloque. espero que puedan ayudarme. gracias

Responder
JMiur  

Tendría que ver el ejemplo. En principio, no habría problemas pero debes ponerle IDs diferentes a cad bloque.

Responder
nEjO  

puedo usar esto para sustituir el page bar de mi blog? esque lo que deseo es que pagebar "inicio, personajes, Autores" es que al darle click en "autores" la solapa quede marcada con un color diferente indicando al lector que se encuentra en la pagina "autores" y que al darle click en "personajes" la solapa "personajes quede marcada con un color diferente. como logro esto? mi blog es el que esta en mi perfil y se llama nucle.... (para no cometer spam)

Responder
JMiur  

Eso es l oque hace por defecto el gadget de páginas, si miras el código, dice:

<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>

Es decir, agregar una clase class='selected' para remarcar la página en la que estás. No veo que en tu caso ocurra lo mismo. Puede ser porque se ha moficado el código (es algo que online no puedo ver).

Responder
Juan aka Tatoon  

Buenas, JMiur... lo primero y una vez más, gracias por tu ayuda.

Estoy tratando de implementar en un blog de prueba el sistema de solapas mediante 'idTabs'. Lo he incluido en dos partes de la plantilla: en el 'sidebar' y en la página de inicio. En esta última no hay problema, pero cuando intento meter solapas en el sidebar me lo "descuadra". Creo que es problema del CSS, ya que también utilizo propiedades CSS con ul y li para las distintas secciones del sidebar y cuando pongo solapas, me "empuja" las siguientes secciones al footer... no se si me explico.

Creo que es cuestión de redefinir el CSS, pero no sé muy bien cómo hacerlo... ¿podrías ayudarme?

Responder
JMiur  

Puede ser cualquier cosa, tendría que ver el ejemplo concreto para intentar buscarle una solución. Puede ser que falte elimnar las flotaciones, o el ancho es excesivo o haya propeidades por defecto que interfierna, etc etc.

Responder
matudelatower  

Muy bueno la verdad que mi sirvio!

Responder
arman2blogsportcom  

buen tuto amigo pero me gustaria saber si hay alguna manera de que la lista de los botones sea mas independiente del contenido osea estoy creando esta pag www.avisoshoymismo.co/movil.html en el contenido izq y derecho se despliegan los menus al darle click en los botones de cada equina superior pero no quiero ponerme a crear cantidad de html's si no mas bien crear todo en uno solo quisiera saber como haria para que cada enlace tenga su capa sin necesidad de crear un html para cada vinculo??

JMiur  

Eso ya es un tema de diseño específico de un sitio que no puedo responder.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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