miércoles, 12 de mayo de 2010

Múltiples pestañas de Blogger en Widget " HACER BLOG "

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

0 comentarios:

Publicar un comentario

DIRECTORIOS

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