Gadget multipestañas para Blogger

En este tutorial mostraré una forma de usar algo de javascript y CSS para crear un gadget con pestañas múltiples en Blogger.

He visto esto en infinidades de blogs y en lo personal me encanta ya que ahorra mucho espacio en la sidebar.


El resultado es muy similar a este:

Pestaña 1Pestaña 2Pestaña 3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Lo he conseguido hacer con CSS y Javascript, por lo que no son necesarias otras librerías para hacerlo funcionar.

Tutorial:

Recomiendo encarecidamente que prestes mucha atención para que entiendas un poco el mecanismo del gadget.

Paso 1: Añadiendo el script:


En ''Diseño | Edición HTML'' deberás buscar el siguiente código:

</head>

Arriba de este deberás pegar el siguiente:

<script type="text/javascript">

function eventoprimerapestaña()

/* Este función permite darle el evento a la primera pestaña*/
{
document.getElementById('pestaña-uno').style.display='block';
document.getElementById('pestaña-dos').style.display='none';
document.getElementById('pestaña-tres').style.display='none';
document.getElementById('boton-pestaña1').style.background='#CC3300';
document.getElementById('boton-pestaña2').style.background='#FF9966';
document.getElementById('boton-pestaña3').style.background='#FF9966';
}

function eventosegundapestaña()

/* Este función permite darle el evento a la segunda pestaña*/
{
document.getElementById('pestaña-uno').style.display='none';
document.getElementById('boton-pestaña1').style.background='#FF9966';
document.getElementById('boton-pestaña2').style.background='#CC3300';
document.getElementById('boton-pestaña3').style.background='#FF9966'; document.getElementById('pestaña-dos').style.display='block';
document.getElementById('pestaña-tres').style.display='none';

}

function eventotercerapestaña()

/* Este función permite darle el evento a la tercera pestaña*/
{
document.getElementById('pestaña-uno').style.display='none';
document.getElementById('pestaña-tres').style.display='block';
document.getElementById('boton-pestaña1').style.background='#FF9966';
document.getElementById('boton-pestaña2').style.background='#FF9966';
document.getElementById('boton-pestaña3').style.background='#CC3300'; document.getElementById('pestaña-dos').style.display='none';
}

</script>

Explicación del código:

• Como es posible apreciar, cada valor de color azul define distintos atributos que tendrán cada enlace (Cada pestaña del gadget).


• Para que el gadget oculte cada pestaña, se le ha asignado el valor display a distintas zonas, al presionar se ocultan 2 pestañas y a la vez se muestra la correspondiente a la función que se ha establecido.


• Los valores background corresponden a los colores de cada botón, al presionar en cada uno de ellos permite que se muestre la pestaña activa como tal, por lo que será necesario cambiar los colores correspondientes además de la zona CSS que en el paso 2 mostraré.

Veamos un ejemplo un poco mas claro (Función botón 1):

function eventoprimerapestaña()

/* Este función permite darle el evento a la primera pestaña*/
{

document.getElementById('pestaña-uno').style.display='block';

document.getElementById('pestaña-dos').style.display='none';

document.getElementById('pestaña-tres').style.display='none';

document.getElementById('boton-pestaña1').style.background='#CC3300';

document.getElementById('boton-pestaña2').style.background='#FF9966';

document.getElementById('boton-pestaña3').style.background='#FF9966';

}

• El valor en verde permite que cuando se presione en la pestaña 1, se oculten las otras 2.


• El valor en  rojo oscuro permite que se cambien el color de las pestañas, cuando se presiona en el botón de la pestaña, cambian de color las 3, mientras que la primera se mantiene en un color distinto a las otras.

Las tres funciones trabajan igual, pero le asignan un color correspondiente a cada botón.

Paso 2: Añadiendo los estilos:

Ahora deberás buscar la siguiente sección:

]]></b:skin>

Arriba de esta pega el siguiente código:

#pestañas { /*El contenedor*/
width:255px;
margin:0px auto;
background:#f5f5f5;
border:2px solid #CC99CC;
padding-top:10px;
box-shadow:2px 2px 2px #969696;
height:auto;
}

#pestaña-uno { /*Contenido pestaña 1*/
position:relative;padding:10px;
}
#pestaña-dos { /*Contenido pestaña 2*/
position:relative;display:none;padding:10px;
}

#pestaña-tres { /*Contenido pestaña 3*/
position:relative;display:none;padding:10px;
}

#boton-pestaña1 { /*Boton de la pestaña 1*/
padding:10px;
border:1px solid #d2d2d2;
background:#CC3300;
color:#fff;
}

#boton-pestaña2 { /*Boton de la pestaña 2*/
padding:10px;
border:1px solid #d2d2d2;
background:#FF9966;
color:#fff;
}

#boton-pestaña3 { /*Boton de la pestaña 3*/
padding:10px;
border:1px solid #d2d2d2;
background:#FF9966;
color:#fff;
}

Guarda los cambios y listo.

Explicación de los estilos:

• Cada botón tiene un color de fondo inicial, la primera pestaña tiene de color de fondo #CC3300, mientras que los otros 2 botones tienen un color #FF9966, el código del script del paso 1 lo que hace es alternar los colores, si te das cuenta, cada función asigna un color al presionar en cada botón.


• En los valores display, los contenidos de cada zona, tanto el 2 como el 3 no se muestran (display:none;), mientras que el primero si lo hace, el script también alterna esos valores, no sólo lo de los colores de fondo.

Paso 3: Añadiendo el gadget:

Ahora en ''Diseño | Elementos de la página'', añadiremos un gadget ''HTML/Javascript'', en el cual pegaremos el siguiente código:

<div id='pestañas'>
<a id='boton-pestaña1' href="javascript:void(0);" onclick='eventoprimerapestaña();'>Pestaña 1</a><a id='boton-pestaña2' href="javascript:void(0);" onclick='eventosegundapestaña();'>Pestaña 2</a><a id='boton-pestaña3' href="javascript:void(0);" onclick='eventotercerapestaña();'>Pestaña 3</a>
<div id='pestaña-uno'>
Contenido pestaña 1
</div>
<div id='pestaña-dos'>
Contenido pestaña 2
</div>
<div id='pestaña-tres'>
Contenido pestaña 3
</div>
</div>

Reemplaza los valores correspondientes por los deseados, cuando hayas terminado guarda el gadget y listo.

Importante:

Si a algunos les dificulta conseguir que los colores de los botones se cambien correctamente al modificarlos, pueden dejar la dirección del blog para que les diga cual código falta por cambiar.