Instala una Tab View, cejas para ocultar contenido

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

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 Diseño | 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.