52

Sidebar "colorida" con Scriptaculous

Sidebar de colores
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

Entradas Relacionadas:

52 comentarios:


Rosa

Hola Rosa, como podre hacer para poner mas ancha la parte de escribir en en mi plantilla, queda muy estrecha y no me caben bien las fotos y los post quedan muy largos. Gracias.

Ana Gabriela Sandino

solo pasé a saludarte, ya estoy en la tierra de los palitos...
un beso y nos leemos!

Ana Gabriela Sandino

solo pasé a saludarte, ya estoy en la tierra de los palitos...
un beso y nos leemos!

JaviMetal

Muy bueno tu blog. Me ha servido de ayuda. Además encuentro mejor el diseño que le has dado, excepto por la cabecera, el logo de antes me gustaba más.
Un saludo!

Rosa

Hola, Rosa, tocayita :-)
El problema es que si agrandas la parte de los post, has de estrechar la sidebar, y tienes cosas en ella que entonces no cabrían y la sidebar probablemente se te iría hacia abajo ...

Yo he hecho una plantilla de prueba como la tuya y he agrandado todo en general, es decir, cabecera, cuerpo, entradas ...la sidebar no, pues creo que tiene un tamaño apropiado.
Puedes mirar en el blog, y si te gusta me lo dices y te paso lo que has de modificar.
Ah, se me olvidaba, lo he visto con IE y Mozilla y yo lo veo perfecto, incluso a distintas resoluciones de pantalla.
¡Saludos! Ya me contarás (y no vale reírse del título del blog):D

http://rosatocaya.blogspot.com/

Rosa

Ana, que bueno que llegaste sin novedad, ahora no pierdas detalle y "empapate" de todo lo que puedas...
¡Besos!

Rosa

Uys, Javimetal, yo estaba pensando lo mismo del logo...¡Me lo pensaré un poco más!:D

Rosa

Gracias tocaya voy a verlo

Rosa

Me gusta ¿como podre hacer para cambiarlo ?( a ver si lo logro)

Rosa

Rosa, esta noche o mejor, si puedo, esta tarde te preparo las instrucciones necesarias. Claro que lo logras...ya verás que es fácil, cambiar cuatro cosillas mínimas;)

Rosa

Rosa te explico los cambios, ¿OK? eso si, ve usando la vista previa y no guardes hasta que este correcto.

Busca esto en la plantilla, está en el CSS, ya sabes, donde hay muchas llaves ¨{ como esa:

/* -- layout -- */
#outer-wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
font: $bodyfont;
background: #fff url(http://www.blogblog.com/snapshot/bg-body.gif) 0 0 repeat-y;
}

Cambia el 700 de width por 900

Sigue hacia abajo hasta que veas esto:
#main-wrapper {
line-height: 1.4;
float: left;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 404px;
}

Cambia width: 428px; y width:404px; por width:600px;

Sencillo, ¿no? ¡¡Suerte!!

Key

Hola Rosa:
Muy bueno todo en tu blog, me ayuda un montón.
Quería consultarte, porque no me funciona este truco, es decir, lo de los colores y el borde quedó bien, pero no redondea los bordes, que será?
desde ya muchas gracias, y me tomé la libertad de linkearte en otro de mis blogs.
Besos Key

Rosa

Hola Key y perdona, se me olvidó mencionar que los bordes redondeados no se ven en Internet Explorer, que supongo es el navegador que usas, en cambio en Firefox si se ven.

Fernando

No entiendo.
El primer codigo va antes o despues de:b:skin?

El segundo codigo va antes de:head pero el tercero que menciona donde va?

Fernando

En que parte del codigo puedo cambiar por otro color? para hacer que combinen?

Rosa

Fernando
El CSS de la plantilla es lo que está antes de ]]></b:skin> así que el primer código va antes de eso.
Cualquier código que sea de CSS va siempre ahí, más arriba o más abajo pero siempre antes de ]]></b:skin>

El tercero, si te fijas, es el mismo que el primero, solo que lleva añadidas algunas cosas como los bordes redondeados (solo IE)

El color se cambia donde pone #000000 o #AAA o lo que sea con el #delante.

Rosa

Fernando, si vas a usarlo en tu plantilla , la Rounders, no te quedará bien porque esa plantilla usa imagenes para las partes redondeadas, así que solo cambiará el color del centro del elemento y quedará poco estético, no te lo recomiendo.

Lucía

Vaya Rosa, he probado unos cuantos de tus trucos siempre con resultados excelentes pero este no me sale.

Yo no veo los recuadros ...

Puede ser porque tengo una imagen de fondo ???

Si te lo puedes mirar, mi blog de pruebas es http://lucia-pruebas.blogspot.com

Muchas gracias

Rosa

Lucía, no creo que sea eso...puede ser que los scripts de blogger hacked hayan dejado de estar alojados en el server o esten fallando...en cuanto pueda lo compruebo...

Lucía

Ya han aparecido los fondos.

Debía ser lo que tú decías Rosa, que algo fallaba en el alojamiento ...

Gracias por todo.

Esteban

aamm a mi no me sale >.< y ya lo habia puesto pero derrepente no me salio T_T

Rosa.

Esteban, si te salió y luego no, podría ser un fallo momentáneo del script...

Esteban

pues creo que si es eso cuando cargo doy a vista previa me dice error en la pagina ..

Esteban

omg ya salio ^^

blogbloc

Rosa, he probado realizar el truco... pero no me sale. Solo he cambiado los colores por #006699 y #341473.
Donde puede estar el error?

Rosa

blogbloc, es una entrada bastante antigua...probablemente los script que usa el truco incluso ya no estén ni alojados allí...en cuanto pueda lo compruebo, si se me olvida y sigues teniendo interés, vuelves a recordarmelo...lo haría ahora, pero no tengo la posibilidad desde aquí...

Anónimo

no me sale q cual es la falla?

Losada

Hola Rosa!!!

De momento no me funciona el truquillo este, aunque imagino que los scripts estaran desaparecidos... ya hace tiempo de este post y a más se encontraban en pages.

Ha ver si me puedes decir donde puedo encontrar los scripts para realojarlos a googlesites.

Gracias por todo

Rosa

Losada Así es, no sirve. El primer script es una librería fácil de conseguir, pero el segundo está modificado por el chico que lo creo y sin verlo ni idea...nunca se me ocurrió guardarlo :(

Losada

Una lastima!!! me interesaba de verdad!!!

Gracias igualmente, probare de encontrar algo por otros lares, creo que me he acostumbrado demasiado a tus explicaciones!!! jejejeje

Global Metion Blog

No Rosa, en realidad esto era lo que buscaba gracias :D

Eres la mejor
You Rock

Global Metion Blog

Rosa el truco no me funciona que será :(

Rosa

Global Después de que ayer me dejaste aquí el comentario, vi que la entrada era antigua y estaba algo "fea" en su diseño, así que volví a editarla y como siempre hago, volví aprobar el sistema...funcionó sin problemas :O

Global Metion Blog

Gracias Rosa :D

Jaime Trujillo Escobedo

Rosa, me encanta este truco. Por suerte, es "automático", es decir, no es necesario incluir nada más que el script y el CSS y los gadgets aparecen de diferente color ;)

¡Maravilloso! :D

¡Que pases un feliz verano!

Rosa

Jaime Feliz verano a ti también! :D

Sonia

Hola de nuevo Rosa. Gracias a tus indicaciones puse un gadget html con borde y fondo de color en la sidebar. Quiero que se vea como un menú. ¿Qué hago para separar las diferentes opciones del menú? Quiero que aparezcan en columna vertical y aparecen todas seguidas en horizontal. No sé si me explico. Lo quiero así:

Quienes Somos
Qué hacemos

Y me sale así:
Quienes somos Qué hacemos

Muchas gracias

Rosa

Sonia Solo tendrías que colocar cada enlace (su código) entre <p> y </p>

Sonia

Gracias Rosa, funciona perfectamente. Otra cosita: en mi ordenador mi cabecera (imagen png)está ajustada al ancho del blog. Sin embargo, en el ordenador de mi hermano que usa pantalla del mismo tamaño (17´) y, misma versión del mozzilla, se ve más corta. Es decir, que por la derecha le sobra un trozo de fondo. ¿Hay alguna manera de que se vea con el tamaño correcto? Gracias.

Rosa

Sonia No hay dirección del blog, no podría decirte... aún con el mismo tamaño de pantalla y mismo navegador, podría ser distinta resolución... es imposible prever todas esas cosas, no obstante, podría mirarlo si hubiese url del blog donde mirar...

Beatriz V.P.

Hola Rosa! Quiero hace una cosa en la sidebar pero no localizo si lo has explicado. Se parece a esto, por eso te lo pregunto por aquí. ¿Es posible dividir la sidebar en vertical? es decir, si te fijas en mi blog tengo la sidebar toda enmarcada. Lo primero que aparece en un texto (Tu guía de shopping....). Me gustaría que ese texto apareciera enmarcado individualmente y luego ya el resto de la barra enmarcado por otro lado. ¿Es posible? GRACIAS!!

Rosa

Beatriz V.P. No, o enmarcas cada gadget por separado, o uno si y los otros no o la sidebar entera.

Beatriz V.P.

Ohhh, qué pena! :( Gracias por tu respuesta de todas formas!!

Najlah

Hola Rosa!

Muy querida gracias a ti he aprendido grandes cosas y la mayoria me resultan muy bien, Estoy creandome una plantilla propia a partir de minimi no se que : ) y hoy estoy algo liada, he hecho esto de poner imagen en la sidebar, y no me sale, antes me paso cuando le puse fondo a los post y lo logre arreglar siguiendo tus pautas con los margenes y eso llamado pidding pero ahora no se que hacer no se por que no me sale. ojala puedad ayudarme mi perfil esta activado de todas formas el url disponible es ensayos040404.

Hasta mas leer y Gracias
Najlah

Najlah

ya lo hice!!, perdonad que haya quitado parte de tu tiempo al leer mis comentarios.

De igual forma sepas que se te agradece
saludos

Najlah

Dark

Hola Rosa, hace tiempo cambie de platilla y he tenido problemas con este hack e intendo de muchos modos, pero ninguno me ha funcionado y me gustaria poder separa las sidebar del cuerpo de l a pagina paraq ue se diferencien, espero q me puedas ayudar gracias besos y abrazos.

Dark

mira este es mi blog http://dynamiccollector.blogspot.com/

Rosa

DarkPara eso no necesitas códigos "raros"... Localiza esto en la plantilla:
#sidewrapper-left {
width:200px;
float:left;
margin:0;
padding:10px 15px 20px 6px;
word-wrap: break-word;
overflow: hidden;
}
#sidewrapper-right {
width:200px;
margin:0;
padding:10px 12px 20px 0;
float:right;
word-wrap: break-word;
overflow: hidden;
}
Debajo de #sidewrapper-left { añades algo así: background: #ddd; y lo mismo en #sidewrapper-right {

Cambias el color en #ddd por el que quieras.

Dark

osa te lo agradescomucho me ha servido eres genial, por fin te lo agrdescp bastante,
besos

harpoysweet

Hola Rosa,

¿Sabes si están teniendo problemas en Blogger para insertar-visualizar vídeos en un post?
Estoy probando la plantilla "BloggerTube" y no hay manera de que se visualice el vídeo. Pego el código por ejemplo de un vídeo de Youtube y el resultado que obtengo cuando veo el post es:

El título del post

[postlink]

Comentarios

Si no puedes ayudarme no pasa nada, buscaré más ayuda.
Gracias!

Rosa

harpoysweet Nadie me ha hablado de problemas con eso... es más, esta mañana yo misma incluí un vídeo de Youtube en otro de mis blogs...

harpoysweet

@Rosa
Muchas gracias por tu respuesta, ¡ya lo he arreglado! No estaba haciendo bien el proceso de inserción... Necesitaba una pequeña plantilla en el post. Gracias, es un placer!

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S