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.
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()
{
$(".bltabcaja_contenido").hide();
$("ul.bltabcaja li:first").addClass("active").show();
$(".bltabcaja_contenido:first").show();
$("ul.bltabcaja li").click(function()
{
$("ul.bltabcaja li").removeClass("active");
$(this).addClass("active");
$(".bltabcaja_contenido").hide();
var bltababierta = $(this).find("a").attr("href");
$(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:
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é.
Si no sabes como hacerlo deja un comentario y te ayudaré.
Referencias: Soh Tanaka
0 comentarios:
Publicar un comentario
¡Gracias por comentar!