M??ltiples pesta??as de Blogger en Widget » HACER BLOG «

  • mayo 12, 2010
Yo hab??a publicado un mensaje en la forma de agregar un widget a la ficha de varios blogs de Blogger tu y c??mo personalizar para adaptarlo a su dise??o de blog meses atr??s. El ??nico problema con ese widget es que no est?? totalmente widgetized es decir, no puede agregar archivos, etiquetas, el perfil de autor o blogger oficial de otros widgets para menos que tenga su c??digo por separado con usted. Me encontr?? con un hermoso y una avanzada y flexible Tabber widget m??s estilizada por los dise??os Lawny y escrita por BarelyFitz . He modificado el tutorial de lawny y han hecho algunos cambios en el c??digo para hacerlo a??n m??s sencillo novato bloggers. Usted puede ver este widget colgada en mi barra lateral.
Para agregar este widget lindo ficha de varios de sus blogs de BlogSpot siga estos pasos.
1.      Ir a Blogger > Dise??o > Edici??n de HTML
2.      Search For </head>
3.      Y pega el c??digo de abajo justo encima,
<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, 
ayuda, 
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; 
para (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) (
para (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 = esto; 
DOM_a.tabberIndex = i;
if (this.addLinkId & & this.linkIdFormat) (
Ayuda = this.linkIdFormat; 
= aId.replace ayuda (/ <tabberid> / Gi, this.id); 
ayudas aId.replace = (/ <tabnumberzero> / Gi, i), 
la ayuda = aId.replace (/ <tabnumberone> / Gi, i +1); 
ayudas aId.replace = (/ <tabtitle> / Gi, t.headingText.replace (/ [^ a-zA-Z0-9 -] / gi,»));
DOM_a.id = ayuda; 
)
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 == ‘funci??n’) ( 
this.onLoad ((Tabber: esto)); 
)
devuelva esta; 
);
tabberObj.prototype.navClick = function (event) 
(
var 
rval, 
uno, 
uno mismo, 
tabberIndex, 
onClickArgs;
a = esto; 
if (! a.tabber) (return false;)
Yo = a.tabber; 
tabberIndex = a.tabberIndex;
a.blur ();
if (typeof self.onClick == ‘funci??n’) (
onClickArgs = (‘Tabber «: uno mismo,’ index ‘: tabberIndex,?? acontecimiento ??de eventos);
/ * IE utiliza una forma diferente de acceder al objeto de evento * / 
if (! evento) (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);
devuelva esta; 
);
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 == ‘funci??n’) ( 
this.onTabDisplay ((‘Tabber’: este ‘??ndice’: tabberIndex)); 
)
devuelva esta; 
);
tabberObj.prototype.navSetActive = function (tabberIndex) 
(
this.tabs [tabberIndex]. li.className = this.classNavActive;
devuelva esta; 
);
tabberObj.prototype.navClearActive = function (tabberIndex) 
(
this.tabs [] tabberIndex. li.className =»;
devuelva esta; 
);
funci??n tabberAutomatic (tabberArgs) 
( 
var 
tempObj, 
divs, 
i;
if (! tabberArgs) (tabberArgs = ();)
tempObj = tabberObj nuevo (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 = tabberObj nuevo (tabberArgs); 
) 
) 
devuelve este; 
) 
funci??n tabberAutomaticOnLoad (tabberArgs) 
( 
var oldOnLoad;
if (! tabberArgs) (tabberArgs = ();)
oldOnLoad = window.onload; 
if (typeof window.onload! = ‘funci??n’) ( 
window.onload = function () ( 
tabberAutomatic (tabberArgs); 
); 
) else ( 
window.onload = function () ( 
oldOnLoad (); 
tabberAutomatic (tabberArgs); 
); 
) 
)
/ * Ejecutar tabberAutomaticOnload () a menos que el «manualStartup» opci??n se ha especificado * /
if (typeof tabberOptions == ‘undefined’) (
tabberAutomaticOnLoad ();
Else ()
if (! [‘manualStartup tabberOptions’]) ( 
tabberAutomaticOnLoad (tabberOptions); 
)
)
//]]> 
</script>
4. Ahora busca ]]> </b:skin> y justo por encima de ??l pega este c??digo,
Tabber /*---------- Inicio -------- * /

. Tabberlive ( 
margin: 0; 
padding: 5px; 
claro: ambos; 
background: $ tbbxbgcolor; 
border: 1px $ tbbxbrcolor s??lidos; 
) 
. tabbernav ( 
margin: 0; 
padding: 3px 0; 
border-bottom: 1px $ tbbxbrcolor s??lidos; 
fuente -familia: Arial, 
Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
) 
. tabbernav li ( 
lista de estilo: ninguno; 
margin: 0; 
display: 
inline; 
) 
. tabbernav li a ( 
padding: 3px 0.5em; 
margin-right: 1px; 
border: 1px $ tbbxbrcolor s??lidos; 
border-bottom: ninguno; 
background: $ tbbxcolor2; 
text-decoration: none; 
color: $ tbbxcolor1; 
) 
. tabbernav un li: hover ( 
color: $ tbbxcolor2; 
background: $ tbbxcolor1; 
border-color: tbbxbrcolor $; 
text-decoration: none; 
) 
. tabbernav li.tabberactive uno, 
. tabbernav li.tabberactive a: hover ( 
background: $ tbbxcolor1; 
color: $ tbbxcolor2; 
border-bottom : 1px solid $ tbbxcolor1; 
) 
. tabberlive. tabbertab ( 
padding: 5px; 
border: 1px $ tbbxbrcolor s??lidos; 
border-top: 0; 
background: $ tbbxcolor1; 
) 
. tabberlive. tabbertab h2, 
. tabberlive. tabbertabhide ( 
display: none; 
) 
. tabbertab. widget de contenido ul ( 
list-style: none; 
margin: 0 0 10px 0; 
padding: 0; 
) 
. tabbertab. widget de contenido li ( 
border-bottom: 1px $ tbbxbrcolor s??lidos; 
margin: 0 5px; 
relleno : 0 5px 2px 0; 
)

Tabber /*------- Fin -------- * /
5. No guarde su plantilla. Ahora la b??squeda de definiciones de variables y pega el c??digo con otras definiciones de las variables,
<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">
Si usted no puede encontrar la definici??n de variables a continuaci??n, busque # navbar-iframe y pega este c??digo de abajo # navbar-iframe (Parte del texto aqu??)
/ * Definici??n de las variables 
====================
<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">
* /
6. Ahora, la parte final . Buscar<div id=’sidebar-wrapper’> y pega el c??digo justo debajo de ??l,
<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>
7. Por ??ltimo guardar la plantilla y la visita Dise??o > Elementos de p??gina « para empezar a a??adir widgets a las pesta??as! Se ver?? algo como esto,
multi-tab-widget-tab-number
Los n??meros en azul son los n??meros de ficha. Para a??adir un gadget / widget a cualquier ficha, simplemente haga clic en el n??mero de ficha y empezar a a??adir lo que quieras. Por ejemplo, para agregar un widget a la pesta??a, haga clic en la barra 3 # 3 y as?? sucesivamente.
8. Finalmente ver su plantilla para ver colgado!

Gu??a de personalizaci??n Para Widget Multi Tab

Aqu?? hablaremos de c??mo cambiar el aspecto y posici??n de este widget de m??ltiples pesta??as.
Cambio de Posici??n:
Para cambiar este widget Tabber a la secci??n inferior de la barra lateral y no en la parte superior extrema, haz esto,
  • Pegue el c??digo en el paso # 6 justo por encima de </div> y no s??lo por debajo de<div id=’sidebar-wrapper’>lo que se muestra en la siguiente imagen,
Shift-position-of-tabber
  • Guardar la plantilla e ir al Dise??o > Elementos de p??gina « para ver si se ha desplazado hacia la parte inferior.
Cambio de aspecto y comportamiento:
  • Los colores de fondo del widget se puede cambiar editando el c??digo en el paso # 5 . Estoy reescribiendo el c??digo de aqu?? con alguna descripci??n.
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="# F8f8f8" value="# F8f8f8">

<Variable name=»tbbxbrcolor» description=»Ficha cuadro Color del borde» 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=»# 289728» value=»# 289728«>
Este c??digo consta de cuatro secciones principales, entre los que las seccionestbbxcolor1:y tbbxcolor2:son los m??s importantes. Voy a describir cada uno en detalle.
Importante Secciones:
tbbxcolor1: Esta es una secci??n importante. Define el color de fondo de este widget ficha m??ltiples y tambi??n el color de cursor del mouse. El color predeterminado es blanco es decir, # ffffff
tbbxcolor2: Esto se refiere al color de fondo de las pesta??as y el texto dentro de las pesta??as. el color predeterminado es verde. Usted puede cambiar el valor # 289728 a un valor de color diferente utilizando nuestra carta de colores
Cambie estos s??lo si lo desea:
tbbxbgcolor: Esta secci??n se refiere al color de fondo de la caja de ficha. Por defecto el color es gris. Si desea cambiar a un color diferente, simplemente cambie el valor hexadecimal de color # F8f8f8a algo diferente con nuestro carta de colores
tbbxbrcolor: Esto se refiere al color de la l??nea fronteriza en las fichas y la caja.
Eso es todo!
Espero que este widget va a ayudar mucho en dar un toque limpio y ordenado a sus blogs. Cualquier pregunta es bienvenida

No Comments Found