Tabview para agrupar varios gadgets en uno solo

Los tabviews son elementos que nos permiten agrupar en un solo contenedor varios gadgets y que pueden seleccionarse por medio de pesta?as.

Su funci?n principal es ahorrarnos espacio en el blog para evitar tener dispersos gadgets de la misma categor?a y as? poder agrupar en uno solo varios gadgets. Hay varios m�todos para crear tabviews, algunos requieren jQuery, otros Mootools, o cualquier otro script.

Para agregarlo a tu blog entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> pega los estilos:

/* Tabview
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}
.tabviewnav {
margin:0;
padding:3px 0; /* Si usas plantilla del Dise?ador cambia el 0 por 15px */
font-size:12px; /* Tama?o de la fuente en las pesta?as */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#0B243B; /* Color de las pesta?as */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#fff;
}
.tabviewnav li a:hover {
color:#fff;
background:#084B8A; /* Color de la pesta?a al pasar el cursor */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#084B8A; /* Color de la pesta?a activa */
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #ccc; /* Borde del contenedor general */
background:#fff; /* Color de fondo del gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Ahora antes de </head> pega este script:

<script type='text/javascript'>
// Tabview para agrupar gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

Por ?ltimo busca esta l?nea:

<div class='column-right-inner'>

O si usas una plantilla antigua de Blogger busca esta l?nea:

<div id='sidebar-wrapper'>

Pega debajo de cualquiera de esas dos l?neas lo siguiente:

<div class='tabview'>
<b:section class='tabviewtab' id='Pesta?a1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pesta?a2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pesta?a3' maxwidgets='1'/>
</div>

Guarda los cambios, y entra en Dise?o | Elementos de la p?gina, ah? ver?s las nuevas ?reas para agregar los gadgets, los identificar?s porque tienen mayor separaci?n que los dem?s.

S?lo tienes que dar click en A?adir un gadget para agregar el gadget a la pesta?a que le corresponde, o bien, arrastrar un gadget que ya tengas a esa secci?n.

Si quieres agregar m?s pesta?as s?lo a?ade antes del ?ltimo </div> una l?nea como esta:

<b:section class='tabviewtab' id='Pesta?a4' maxwidgets='1'/>

Toma en cuenta que cada l?nea que agregues deber? tener un ID diferente, por ejemplo Pesta?a5, Pesta?a6, etc.

Puedes agregar varios tabviews, s?lo repite el ?ltimo paso y recuerda cambiar de igual forma el nombre de los IDs.

Si deseas agregarlo en una entrada para mostrar un contenido entonces el c?digo que deber?s a?adir en tu post ser? este:

<div class='tabview'>
<div class='tabviewtab' id='Pesta?a1' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>
<div class='tabviewtab' id='Pesta?a2' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>
<div class='tabviewtab' id='Pesta?a3' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>
</div>

Ah? agrega el contenido que quieras donde se indica y el t?tulo de la pesta?a, y de igual forma puedes a?adir m?s pesta?as antes del ?ltimo </div> a?adiendo un fragmento como este:

<div class='tabviewtab' id='Pesta?a4' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>

Recuerda que, si tu sidebar es muy angosta no conviene que pongas muchas pesta?as, o que los t?tulos de las pesta?as sean muy largos, de lo contrario las pesta?as se encimar?n.

Tambi�n debes tomar en cuenta que este gadget no acelera la velocidad de carga del blog, es ?nicamente para agrupar gadgets en uno solo, incluso -dependiendo de cada blog- podr?a tardar un poco en cargar el tabview.