Tablas o pestañas para tu blog

Esta tabla con pestañas está pensado para poder ponerla en la columna lateral de nuestro blog,

Es una gran método para poder encajar contenido que por motivos de espacio no podemos encajarlo.

Busca la etiqueta </head> en tu plantilla y justo antes añade esto:

</script>

</script>

$(document).ready(function() {

$("#tabs").tabs();

});

</script>

Ahora, observando la imagen, agrega bajo los bloques que acabas de insertar, una línea de código dependiendo del modelo escogido.

ver códigos

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab1.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab2.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab3.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab4.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab5.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab6.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab7.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab8.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab9.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab10.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab11.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab12.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab13.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab14.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab15.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab16.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab17.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab18.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab19.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab20.css" type="text/css" />

Finalmente, procederemos a introducir el contenido de cada pestaña.

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

Incluye esto en su interior:

<div id="tabs">
<ul><li><a href="#tabs-1">PESTAÑA 1</a></li><li><a href="#tabs-2">PESTAÑA 2</a></li><li><a href="#tabs-3">PESTAÑA 3</a></li></ul>
<div id="tabs-1">CONTENIDO PESTAÑA 1</div>
<div id="tabs-2">CONTENIDO PESTAÑA 2</div>
<div id="tabs-3">CONTENIDO PESTAÑA 3</div>
<center><a href="http://goo.gl/favZ"><div id="bbTabsQuery"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirMGg53imGzWxnlZtU9wkNtjrYVpsPk8q0lu_WLsedDPLRii5-PH6JZldo5gbOaI_ghCRhFwjGGawDgbBmalDeEDyEvUNUMlyAilrKXkYXD0nJOZGBPNmKq15gJsxhxNSvZmhKyAqWDCQD/s320/aleman.png"/></div></a></center>
</div>