miércoles, 12 de mayo de 2010

El Mejor Acordeón de usuario de Blogger para gadgefs





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>

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