miércoles, 12 de mayo de 2010

Añadir un Sector con pestañas para incluir gadgets




Veremos como incluir en la sidebar o sobre las entradas por ejemplo, una nueva sección que nos permita mostrar mediante pestañas diferentes gadget de Blogger (archivos, etiquetas, perfil, etc.)
Gadget-Tabs

Incluiremos además, usando variables, la posibilidad de controlar su diseño desde la pestaña "Fuentes y colores" de nuestro panel de Blogger.

[1] Ingresamos a nuestro panel de Blogger -> Diseño -> Edición HTML.

[2] Localizamos la etiqueta </head>.

[3] Copiamos este script y lo pegamos justo antes de esa etiqueta:

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>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;
  }
}
tabberObj.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.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/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({tabber:this});
  }
  return this;
};
tabberObj.prototype.navClick = function(event)
{
  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;
  a = this;
  if (!a.tabber) { return false; }
  self = a.tabber;
  tabberIndex = a.tabberIndex;
  a.blur();
  if (typeof self.onClick == 'function') {
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }
  self.tabShow(tabberIndex);
  return false;
};
tabberObj.prototype.tabHideAll = function()
{
  var i;
  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  div = this.tabs[tabberIndex].div;
  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);
  return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  this.tabHideAll();
  div = this.tabs[tabberIndex].div;
  div.className = div.className.replace(this.REclassTabHide, '');
  this.navSetActive(tabberIndex);
  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }
  return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = this.classNavActive;
  return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = '';
  return this;
};
function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;
  if (!tabberArgs) { tabberArgs = {}; }
  tempObj = new tabberObj(tabberArgs);
  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;
  if (!tabberArgs) { tabberArgs = {}; }
  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
    tabberAutomaticOnLoad();
} else {
  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }
}
//]]>
</script>

[4] Algo más arriba de donde hemos colocado el script veremos la etiqueta ]]></b:skin> y justo sobre ella colocamos el código CSS:

/*-- Inicio sección pestañas --- */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/*-- Fin sección pestañas---*/

[5] Guardamos los cambios en la plantilla.

[6] Una vez hemos guardado los cambios, localizamos la zona de la plantilla (casi a comienzo de su código) la zona donde están incluidas las variables, será algo así:

Variables

[7] Copiamos el código de las nuevas variables que vamos a añadir y lo pegamos justo después de la última variable de nuestra plantilla (antes del cierre de las mismas: */)

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

[8] Para terminar la instalación, localizamos esta línea en la plantilla: <div id='sidebar-wrapper'> y pegamos este código justo debajo:

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

[9] Guardamos cambios y comprobamos si la nueva sección para añadir gadgets está disponible en Diseño:

Gadget Tabs Diseño

Modificaciones:
* Los números en azul son los números de cada pestaña. Para añadir un gadget a una de las pestañas, pinchamos en el número de la pestaña y añadimos el gadegt que queremos o arrastramos uno que ya tengamos incluido y que queramos mostrar ahí.

* De esta manera la nueva sección de pestañas aparece al comienzo de nuestra sidebar, si queremos mostrarla al final de la misma, desde Edición HTML localizamos dentro del código de la plantilla su ubicación Y movemos ese código justo sobre el </div> de cierre del código de la sidebar.

Colocación sidebar tabs

* Si quisiéramos mostrar la sección de pestañas sobre las entradas, tendríamos que colocar el código (paso [8]) justo después de <div id='main-wrapper'>

* Los cambios como antes os decía del color del borde, las pestañas o el fondo de la "caja", los haremos desde nuestro panel en Fuentes y colores viendo los cambios en Vista previa.

Tabs colores


27 comentarios:

Make-up by Maryland dijo...

Me encantaría añadir algo así en mi blog pero en mi plantilla no tengo esos códigos de "variables" ni nada parecido, ¿me podrías ayudar?
Gracias de antemano

De todo para los blogger dijo...

Hola, que plataforma utilizas?
y que plantilla?
Saludos

Luis dijo...

Este tipo utilidades son para blogger

Make-up by Maryland dijo...

Utilizo blogger y mi plantilla es la WP Polaroid en rosa ... es una plantilla de WP adaptada para Blogger

De todo para los blogger dijo...

#outer-wrapper{
background: url(http://3.bp.blogspot.com/_V-IXTBBt1Bg/SMv3xQ-M0dI/AAAAAAAAAHU/nvWymUjFdzk/s1600/bot-bgr.gif) repeat-x bottom;
padding: 0 0 50px;
}

Busca esto y pega debajo el código 1º de las variables

De todo para los blogger dijo...

Siempre haciendo un respaldo de tu plantilla y vista previa antes de guardar plantilla.
Saludos
Ya me contaras, si es lo que buscas

Abel3D dijo...
Este comentario ha sido eliminado por un administrador del blog.
BulkSms Aamurautz dijo...

This is a great article. It gave me a lot of useful information. thank you very much.
I would like to thank you for the efforts you have made in writing this article.
Bulk SMS Hyderabad, Bulk SMS

Servic Cente dijo...

Nice article admin thank you for sharing
lg service center in Hyderabad

Servic Cente dijo...

Nice article admin thank you sharing for valuable information
ac service center in Hyderabad

Servic Cente dijo...

Thank you admin for sharing such valuable information
tv service center in Hyderabad

Servic Cente dijo...

Great Article Thanks for Sharing
washing machine service center in Hyderabad

Servic Cente dijo...


Great article thanks for sharing really its very helpful information.
refrigerator service center in Hyderabad

Servic Cente dijo...

Nice information thanks to Admin
whirlpool service center in Hyderabad

Servic Cente dijo...

Its really worth able Article thanks for sharing admin
samsung service Centre in Hyderabad

Servic Cente dijo...

Nice article admin thank you for sharing
lg service center in Hyderabad

Servic Cente dijo...

Nice article admin thank you sharing for valuable information
ac service center in Hyderabad

Servic Cente dijo...

Thank you admin for sharing such valuable information
tv service center in Hyderabad

Servic Cente dijo...

Great Article Thanks for Sharing
washing machine service center in Hyderabad

Servic Cente dijo...

Great article thanks for sharing really its very helpful information.
refrigerator service center in Hyderabad

Servic Cente dijo...

Nice information thanks to Admin
whirlpool service center in Hyderabad

Servic Cente dijo...

Nice article admin thank you for sharing
lg service center in Hyderabad

Servic Cente dijo...

Nice article admin thank you sharing for valuable information
ac service center in Hyderabad

Servic Cente dijo...

Thank you admin for sharing such valuable information
tv service center in Hyderabad

Servic Cente dijo...

Great Article Thanks for Sharing
washing machine service center in Hyderabad

Servic Cente dijo...

Great article thanks for sharing really its very helpful information.
refrigerator service center in Hyderabad

Servic Cente dijo...

Nice information thanks to Admin
whirlpool service center in Hyderabad

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones