#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Plantilla MovieKhor
Inspiro 2.0 Plantilla blogger
Plantilla Abigail
Gadget de entradas populares en dos columnas
Plantilla New Pro Blogger Template
Revista Pro template blogger
Galeria imágenes CSS
Crear un marcador de código para nuestro blog.
Cajas con animaciones usando jQuery
Más Tooptip
Catalogspot plantilla blogger
Como se creó Google

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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</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>

Reemplaza en el código PESTAÑA X por el título que llevará la pestaña y CONTENIDO PESTAÑA X por el contenido que mostrará cada solapa.

Publicar un comentario

0 Comentarios