El Mejor Acorde??n de usuario de Blogger para gadgefs

  • mayo 12, 2010

Despu??s de mucho tiempo este widget (Acorde??n para Blogger) Yo no soy de liberaci??n, algunos blogger me pregunta acerca de la secuencia de comandos en mi barra lateral. Para que os suelte esta secuencia de comandos para todos vosotros.
blogger Muchos ya hacen esto, pero ninguno de ellos de uso f??cil para la nueva versi??n de Blogger.

Esta secuencia de comandos muy ??tiles a todos, especialmente para aquellos que tienen una gran cantidad de contenido en su barra lateral y pasan mucho tiempo pensando en d??nde colocar cosas nuevas.
El m??todo que se desarroll?? de Simple Acorde??n Men?? jQuery , me pareci?? muy ??til y ha decidido adaptar esta t??cnica a Blogger plataforma. Este tutorial le llevar?? un muy f??cil de implementar manera de hacer acordeones de tus widgets barra lateral, he aqu?? algunos rasgos de mi m??todo:
  • F??cil de instalar.
  • No hay necesidad de editar HTML en la parte lateral.
  • Libertad para establecer qu?? reproductores podr?? mostrar u ocultar.
  • Tiene dos tipos, en primer lugar es de acorde??n y el segundo es s??lo mostrar / ocultar
  • Despu??s de implementar, widgets son normalmente editados de la secci??n Page Elements.

El Resultado Final

Si quieres verlo funcionando por favor marque la demostraci??n en vivo.
Demostraci??n usando plantilla a partir de Choen si lo deseas, puedes descargar aqu?? Grid plantilla

Desde primera maqueta con la barra lateral y la segunda barra lateral Accrodion Activar Mostrar / Ocultar

image

Paso 1 – Instalaci??n de jQuery Biblioteca

Este script necesita el jQuery biblioteca JavaScript, si ya lo ha instaladopuede saltarse este paso, si dona’t han encontrado esta:

</head>

Vuelva a colocar con este

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>
</head>

Paso 2 – Instalaci??n del Script

Ok, ahora que usted se ha asegurado de que tiene jQuery 
instalado, es necesario instalar la secuencia de comandos, busque el siguiente:

</head>

sustituirla por la siguiente:

<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/accordionscriptv101-min.js' type='text/javascript'/>
</head>

Personalizar

Como usted ha se??alado que obtendr?? unas pocas l??neas que se pueden personalizar, son:

var sidebarnameacc1 = "sidebar"; var accordionside1 = true; var sideshow1 = new Array (0,0);

sidebarnameacc1 es primera sidebara su id, por lo general s??lo la barra lateral , pero en caso de que disponer de un ID diferentes que usted puede aprender de este post
accordionside1 -> verdadera media ser?? de tipo acorde??n, falsa significa
ocultar o mostrar Contenido, puede intentar de demostraci??n.
sideshow1 = N??mero de reproductores elegido para mostrar, por lo general si
tienen anuncios que desea mostrar siempre cuando la carga con esta variable se puede
seleccionar los widgets.
0 = primer widget en la barra lateral
1 = segundo widget en la barra lateral y as?? sucesivamente
aunque s??lo sea para un primer widget como ??ste
var sideshow1 = new Array (0,0);
aunque s??lo sea un widget para el segundo como ??ste
var sideshow1 = new Array (1,1);
si dos de widget primero y segundo de esta
var sideshow1 = new Array (0,1);
si muchos se pueden agregar como ??ste
var sideshow1 = new Array (0,1,2,3,4,5);
Ok Finalizar s??lo que el paso si quiere dar Estilo que puedes continuar en
el paso 3

Paso 3 – S??lo para usuarios avanzados: Ubicaci??n de los estilos CSS en su

Le doy «headactive» clase para hacer diferente cuando mostrar el contenido u ocultar, usted
puede cambiar lo que quieras de esa plantilla que uso este estilo.
Encontramos esto en su plantilla:

]]> </b:skin> [/ Html] reemplazarlo con esto: [html]. H2.headactive barra lateral (background-color: # d77218;-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px;). Sidebar2 h2 . headactive (background-color: # d77218;-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px;)]]> </b:skin>

No Comments Found