Sidebar "colorida" con Scriptaculous

Se trata de que cada gadget de la sidebar se vea con distinto diseño, de forma alterna.
Si queremos por ejemplo que los gadget se diferencien por su color, el resultado sería algo como el de la imagen de ejmplo.

Si tenéis en vuestro blog más de una sidebar, el efecto se muestra en todas por igual.


[1] Vamos en nuestro panel a Edición HTML y colocamos justo antes de ]]></b:skin> estas líneas de CSS:

.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}

[2] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en la plantilla para algún otro efecto, no es necesario volver a incluirlo):

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

[3] Debajo del script de Scriptaculous que acabamos de incluir, colocamos esto:

<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>

Este script está subido a Google Pages así que, como siempre os aconsejo, lo mejor es que después de descargar el script cada uno lo use desde su propio alojamiento.
También puede usarse directamente en la plantilla colocandolo en lugar de la línea de código anterior.


Por supuesto que no solo podemos hacer que los gadget se distingan por su color, añadiendo algunos parámetros más en el CSS podríamos mostrar unos con borde,otros con imagen de fondo, etc.:

Incluso podemos hacer que todos presenten sus bordes redondeados (en IExplorer el borde se verá "normal"):

.even {
background: #EEEEEE url(url_de_la_imagen_de_fondo);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
.odd {
background-color: #AAAAAA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}

Visto en: Blogger Hacked