Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Tabs o pestañas en blogger

Mostrar cualquier contenido en tabs o pestañas resulta de mucha utilidad, sobre todo si no tenemos espacio suficiente en la sidebar (barra lateral) o deseamos que el blog cargue a una velocidad mayor.

En esta entrada aprenderemos de forma sencilla un básico procedimiento por el cual instalaremos las tabs en el blog.

Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS encima:

ul.bltabcaja {height:24px;
margin: 0 auto;
width: 100%;
padding: 0;
float: left;
list-style: none;
list-style-type: none;
}
ul.bltabcaja li {
height:23px;
line-height:23px;
overflow: hidden;
background: #b3e0b5;
float: left;
position: relative;
margin: 0 auto;
padding: 0;
border-left: none;
margin-bottom: -1px;
border: 1px solid #999999;
}
ul.bltabcaja li a {
padding: 0 18px;
font-size: 14px;
text-decoration: none;
color: #000000;
display: block;
outline: none;
}
ul.bltabcaja li a:hover {
text-decoration: none;
background:#81D585;
}
ul.bltabcaja li a:active {
background: #6db671;
}
#bltabcaja2 {
width: 218px;
clear: both;
border-top: none;
border: 1px solid #999999;
overflow: hidden;
float: left;
background: #ffffff;
}
.bltabcaja_contenido {
font-size: 14px;
padding: 20px;
}
html ul.bltabcaja li.actual a:hover {
background: #ffffff;
border-bottom: none;
}

Ahora busca la etiqueta </head> y encima inserta este script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
$(&quot;.bltabcaja_contenido&quot;).hide();
$(&quot;ul.bltabcaja li:first&quot;).addClass(&quot;active&quot;).show();
$(&quot;.bltabcaja_contenido:first&quot;).show();

$(&quot;ul.bltabcaja li&quot;).click(function()
{
$(&quot;ul.bltabcaja li&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.bltabcaja_contenido&quot;).hide();
var bltababierta = $(this).find(&quot;a&quot;).attr(&quot;href&quot;);
$(bltababierta).fadeIn();
return false;
});
});
</script>

La primera línea (marcada en grisáceo) es el script JQuery.min.js, por lo que si ya lo tienes en la plantilla no necesitas volver a ponerlo.

Guarda la plantilla:




Ahora procederemos a introducir el contenido de cada Tab o pestaña en un gadget HTML-javascript:


Diseño>añadir gadget (elemento de página)>html-javascript






Pega esto:

<ul class="bltabcaja">
<li><a href="#bl1">TITULO TAB 1</a></li>
<li><a href="#bl2">TITULO TAB 2</a></li>
</ul>

<div id="bltabcaja2">
<div id="bl1" class="bltabcaja_contenido">
CONTENIDO TAB 1
</div>
<div id="bl2" class="bltabcaja_contenido">
CONTENIDO TAB 2
</div>
</div>

Reemplaza TITULO TAB X por el título que llevará la pestaña y CONTENIDO TAB X por el contenido que mostrará.

Si te fijas, en el código hay cuatro elementos resaltados en naranja. Estos son los "nombres" de las pestañas y cada una debe tener uno distinto.

En caso de querer añadir más pestañas, copia la segunda línea y pégala antes de </ul>. ¡No olvides cambiarle el nombre!

Después, bastará con añadir antes del cierre </div> otro bloque como este (en el que debes cambiar otra vez el nombre):

<div id="bl1" class="bltabcaja_contenido">
CONTENIDO TAB 2
</div>

Una vez tengas el contenido escrito, guarda el gadget y obtendrás algo como esto:


Notas:

Puedes editar el estilo de la caja por completo, aplicando colores de fondo distintos, así como editando los valores del tamaño del texto, la anchura, altura...

Si no sabes como hacerlo deja un comentario y te ayudaré.


Referencias: Soh Tanaka

Calisto dice...

Muchas gracias. No sé que sería de mi blog sin el Balcón.

Gracias por enseñar este truco, hace tiempo que lo buscaba.

Anónimo dice...

Muy bueno Jaime, esto estaba buscando desde hace tiempo, ahora voy a probar si me va bien, saludos.

Jaime Trujillo Escobedo dice...

Gracias a ti, Calisto por dejar tu huella en la entrada ^^.

Jaime Trujillo Escobedo dice...

Me alegro pues de que hayas encontrado lo que buscabas, Anónimo. Suerte con la instalación ;).

Ŵebmaster™ dice...

Jaime, muy buena tu explicación! pero me surge una duda, como coloco es los tabs por ejemplo el contenido de mis etiquetas, archivos del blog, blog amigos.

De antemano muchas gracias.

http://maximatecnologia.blogspot.com/

Jaime Trujillo Escobedo dice...

Ŵebmaster™, al decir "tabs" ¿te refieres a las casillas de la barra lateral? o te refieres a colocar el gadget de archivos, etiquetas... dentro de los tabs :S.

Esto último tendré que explicarlo en una entrada (se usa otro tipo de tabs), por lo que empezaré a escribirla ^^.

¡Abrazos!

Ŵebmaster™ dice...

Jaime, gracias por tu atención! me has entendido perfectamente, me refiero a colocar gadget de archivos, etiquetas dentro de los tabs.

Nuevamente muchas gracias.

http://maximatecnologia.blogspot.com/

Jaime Trujillo Escobedo dice...

Ŵebmaster™, pronto podrás ver el truco en El Balcón.

¡Abrazos!

Ŵebmaster™ dice...

Jaime, nuevamente un saludo desde Venezuela, he probado muchos codigos para colocar los gadgets en pestañas y nada, si me das una ayuda te lo agradeceria!

Jaime Trujillo Escobedo dice...

¿Podrías indicarme mejor el problema, Ŵebmaster™? ¿Te aparece algún tipo de error?

Este truco debería funcionar correctamente :S.

Ŵebmaster™ dice...

Jaime, funciona perfectamente, pero agregar gadget a esas pestañas! es decir poner en pestañas las secciones: etiquetas, fans, ultimas entradas, etc...

Jaime Trujillo Escobedo dice...

Ŵebmaster™, me temo que con este truco no va a poderse hacer. Estas pestañas únicamente sirven para mostrar contenido, ya sea texto o imagen, pero no gadgets.

Aún así, puedo decirte que pronto traeré otro truco muy similar, en el que explicaré como dividir la sidebar (barra lateral) en tabs.

Anónimo dice...

Yo he probado esto con gadgets html y si funciona, he probado con varias cosas,en el contenido de las tabs se agrega el código HTML y listo nada del otro mundo, funciona perfectamente.

Jaime Trujillo Escobedo dice...

Cloudx18, si incluimos este código en la plantilla y no en un elemento de página e insertamos en donde iría el contenido de cada tab, una sección (<b:section...) y su correspondiente atributo showaddelement='yes' estoy seguro de que funcionaría. El método que explicaré más adelante no requiere una edición tan amplia del código ya que tan solo hará falta arrastrar los gadgets hacia cada pestaña (desde el apartado de Diseño>Elementos de la página).

Alfonso G. Maniega dice...

Muchas gracias. Muy útil y didactico :)

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo