Gadget con Pestañas en HTML
Este Gadget es de mucha utilidad, nos permite poner mucha información en varias pestañas en el reducido espacio de la barra lateral del blog.
Dependiendo de nuestro blog podremos poner 2,3 ó mas pestañas, en mi caso no tengo mucho espacio lateral por lo que solo pude poner dos para que lo estética no se resienta.
Además es muy cómodo porque no tendremos que modificar el código HTML en la Plantilla, sino que lo añadiremos a través del Panel de Control --> Diseño --> Añadir un Gadget --> HTML/Javascript, en titulo le ponéis el que queráis y en Contenido copias y pegas el siguiente código:
div.TabView div.Tabs{height: 24px;overflow: hidden;}
div.TabView div.Tabs a{float: left;display: block;width: 98px;
text-align: center;height: 24px; padding-top: 3px;
vertical-align: middle;border: 1px solid #000;border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif; font-weight: 900;color: #000; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{
background-color: #ddd; }
div.TabView div.Pages{clear: both;border: 1px solid #6E6E6E;
overflow: hidden;background-color: #fff; }
div.TabView div.Pages div.Page{height: 100%;padding: 0px;
overflow: hidden;}
div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a >Nombre 1</a>
<a >Nombre 2</a>
<a >Nombre 3</a>
</div>
<div style="width: 300px; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Código a mostrar 1
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 2
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 3
</div>
</div>
<script>function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div></div></form>
El Codigo HTML que os pongo es para tres pestañas pero admite muchas modificaciones que os pongo por colores.
Editar Fuentes/Tamaño/Color de las pestañas
Código en rojo :Titulo de la pestaña.
Código en naranja: Ancho y alto de la caja, modificar el tamaño que se necesite.
Código en verde: Tamaño de la Fuente del titulo.
Código en morado: Color de fondo de la pestaña.
Código en negro (negrilla): color de la fuente del titulo.
Esto en cuanto a la estética del Gadget.
A continuación las modificaciones respecto al numero de pestañas y como introducir el contenido en cada pestaña.
Numero de Pestañas
En caso de poner dos pestañas tendremos que eliminar
obviamente la tercera.
obviamente la tercera.
Eliminar: <a >Nombre 3</a>
Eliminar:
<div class="Page"><div class="Pad">
Código a mostrar 3
</div>
</div>
Si quisiéramos aumentar el numero de pestañas lo haríamos a la inversa aumentando las mismas lineas de código que eliminamos:
<a >Nombre 4</a>
<div class="Page">
<div class="Pad">
Código a mostrar 4
</div>
</div>
Como introducir contenido dentro de las pestañas:
Donde pone Código a mostrar 1 ---> Sustituir por Ejemplo:
<li><a href=http://www.online-convert.com>Convertir archivos on-line</a></li>
<li><a href=https://tools.pingdom.com>Comprobar la velocidad de carga de sitios Web</a></li>
<li><a href=http://www.peekyou.com>Busca personas a través de la Web</a></li>
<li><a href=http://www.whatfontis.com>Buscar una fuente a través de una imagen</a></li>
Sustituir la Url y el titulo por vuestras necesidades.
Con este ej. tenemos cuatro lineas de enlaces dentro de la pestaña (1), con la pestaña (2) se hace lo mismo, se puede poner el código que se desee sustituyendo donde pone Código a mostrar 2.
Ejemplo de como queda el código en mi blog con dos pestañas, con los enlaces que yo tengo.
<div style="width: 160px; height: 300px;" class="Pages">
<div class="Page">
<div class="Pad">
<li><a href=https://www.iconfinder.com/ target="_blank">Busqueda de Iconos Gratis</a></li>
<li><ahref=http://resizeyourimage.com/en/#transform=&page_no=1&no_of_pages=1&filename=3.jpg&selection_top=47&selection_left=71&selection_width=564&selection_height=376&zoom=1176&demomode=true>Cambiar el tamaño de una imagen</a></li>
<li><a href=http://www.online-convert.com>Convertir archivos on-line</a></li>
<li><a href=https://tools.pingdom.com>Comprobar la velocidad de carga de sitios Web</a></li>
<li><a href=http://www.peekyou.com>Busca personas a través de la Web</a></li>
<li><a href=http://www.whatfontis.com>Buscar una fuente a través de una imagen</a></li>
</div>
</div>
<div class="Page">
<div class="Pad">
<li><a href=http://tutorialescomofunciona.blogspot.com.es/search/label/ibooks>Trucos Calibre</a></li>
<li><a href=http://tutorialescomofunciona.blogspot.com.es/2014/04/compartir-libros-por-correo-electronico.html>Enviar Libros x E-mail</a></li>
<li><a href=http://tutorialescomofunciona.blogspot.com.es/2014/05/backup-de-la-configuracion-de-calibre.html>Backup Config Callibre</a></li>
<li><a href=http://tutorialescomofunciona.blogspot.com.es/2014/03/complementos-calibre.html>Plugins Calibre</a></li>
<script>function tabview_aux(TabViewId, id)
Recordar, para que se abran los enlaces en otra pestaña del navegador tendréis que poner target="_blank" a continuación de la URL correspondiente, importante después de
/espacio target="_blank">
sino dejas un espacio no funciona.
No hay comentarios:
Publicar un comentario