¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.
Tabs o pestañas en blogger (II) 20 diseños a elegir
Tabs o pestañas en blogger (II) 20 diseños a elegir
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.
Busca la etiqueta </head> en tu plantilla y justo antes añade esto:
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 [+/-]
Finalmente, procederemos a introducir el contenido de cada pestaña.
Incluye esto en su interior:
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.
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 [+/-]
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/AVvXsEhcUyNvJliF9X3q_ywiaCTrFICwiS9pKG4dsyuTiDynjhbqmx3_flVlu51Gtqx3FA4HQdvzbBz8n3wvLcQEUYz5bbm69tZjiND1EWBGYJKO4CbE4rHGLFbLN5cPQmgOI0eQkeSPwqWPuRhP/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.
