Multipestañas en Blogger

Seguimos ahorrando espacio en la sidebar de nuestros blog y otro atilugio para ello es por supuesto un gadget multipestañas.
Se puede usar para incorporar los Post Populares, comentarios recientes, lo más comentado, cualquier flash, etc....

En internet existen una multitud de gadget sobre esto pero la mayoría son bastantes complicados, para ello os dejo este que es muy fácil, pero eso sí hay que saber adaptarlo a la anchura de la plantilla.

VER DEMO

El proceso a seguir es el siguiente:
Nos vamos a Diseño y añadimos un gadget HTLM y pegamos lo siguiente:

<style>div.TabView div.Tabs{
height: 24px;
overflow: hidden;}
div.TabView div.Tabs a{
float: left;
display: block;
width: 80px; /* ANCHO PESTAÑAS*/
text-align: center;
height: 24px; /* ALTO DE LAS PESTAÑAS*/
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* COLOR DEL BORDE TITULO MENU */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* FUENTE TITULO */
font-weight: 900;
color: #000; /* COLOR TÍTULO */}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{
background-color: #F4F4F4; /* COLOR TÍTULO AL PASAR RATÓN */}
div.TabView div.Pages{
clear: both;
border: 1px solid #6E6E6E; /* COLOR BORDE WIDGET */
overflow: hidden;
background-color: #FBF1A4; /*COLOR FONDO WIDGET */}
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: 250px;" class="Tabs">
<a><span style="color: #525252">mostrar 1</span></a>
<a><span style="color: #525252">mostrar 2</span></a>
<a><span style="color: #525252">mostrar 3</span></a>
</div>
<div style="width: 250px; height: 230px;" 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 type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
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);
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);
}
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>

Este gadget está adaptado para una sidebar de 260 de ancho y tiene una altura de 250 de alto.

Podéis adaptarlo a vuestra sidebar tanto si es más ancha como más estrecha cambiando y jugando con los valores numéricos que están en negrita.
Lo mismo ocurre con los colores, van colocada las carasterísticas en cada línea.

Ver Ejemplo en mi sidebar

!!!!!!!!!!!!!! A DISFRUTARLO !!!!!!!!!!!!!!!!

Publicaciones Relacionadas