16 junio 2012

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.


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 !!!!!!!!!!!!!!!!


7 comentarios

donde encuentro el código html del widget?

No tienes que encontrar ningún código Html, solo pegarlo en un gadget/Html.
Vas a diseño - añadir un gadget - HTML/Javascript - y aquí pegas el código.

pero (CÓDIGO HTML DEL WIDGET QUE QUIERAS ) hay que va?

como le canbio el color al fondo

Norlan, en el primer código lo llevas puesto, /*COLOR FONDO WIDGET */}, cambia el color por el que desees, busca tu color en esta tabla.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"