MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Tabs o pestañas en blogger 20 diseños a elegir

Este multi tab o widget con 3 pestañas puedes verlo funcionando AQUI

Hace tiempo aprendimos a poner en la barra lateral del blog, un artilugio que mostraba contenido por medio de solapas: las Tabs o Pestañas. Tal y como expliqué anteriormente, resulta de mucha utilidad pues nos ayudará a encajar el contenido que por motivos de espacio no puede implementarse en la barra lateral.

En esta entrada presento una nueva versión, basada en la librería jQuery y con un total de 20 modelos a elegir, de manera que utilices el que mejor se ajuste al diseño de tu blog.

Diseño>Edición de HTML>expandimos artilugios



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.




Desplegar 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="http://1.bp.blogspot.com/_Bvhqq3YFEx4/TPwSxsIYLFI/AAAAAAAAAf0/bSVBmFIq5Nc/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.

Ten en cuenta que el término contenido abarca mucho más que texto por lo que podrás mostrar imágenes, enlaces e incluso un reproductor de música.

Guarda el gadget una vez hayas terminado.

Fuente: http://elbalcondejaime.blogspot.com/

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者