#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
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
Menú Material Desing
 Menú JQuery con iconos
Como podemos cambiar la direccion de la pantalla de nuestro PC?
Menu CSS
Generador Tooltip
Listas para las entradas de mi blog

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