Este efecto nos recuerda a los años del groovy en los que se usaban mucho este tipo de barras y cuadros de colores. Se trata de un script que muestra en el fondo del blog unas barras de colores en movimiento que le dan dinamismo y mucho estilo al blog.
Puedes ver un ejemplo en este blog de pruebas.
Para ponerlo en tu blog sólo necesitas entrar en Diseño | Edición de HTML y antes de </body> pegar el siguiente script:
<script type='text/javascript'>
// <![CDATA[
var border=50; // Ancho de las barras
var effects=3; // Cantidad veces que se ejecuta el efecto
var speed=50; // Velocidad de la animación (un valor menor lo hará más rápido)
// Aquí abajo ponemos los códigos de los colores
var colours=new Array("#2F1925", "#F8E5DE", "#DCD796", "#F87501", "#9C0A55", "#6594B8", "#90C41A");
/*
1970s Groovy WebPage Effect
(c) 2008 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>
¿Y luego? Ya nada, con eso es más que suficiente. Ya sólo puedes configurar algunos detalles que se explican al inicio del código en color verde.
Ahí donde se indica puedes poner la cantidad de colores que quieras, sólo necesitas poner los códigos entre comillas y separados por una coma tal como se muestra en el script.
Ahí donde se indica puedes poner la cantidad de colores que quieras, sólo necesitas poner los códigos entre comillas y separados por una coma tal como se muestra en el script.
Notarás que los colores tienen cierta opacidad, esto es para que las figuras de los cuadros que se forman se puedan apreciar; si prefieres quitar la opacidad sólo elimina lo que está en color naranja, aunque el resultado final no será igual.
Lindo ¿no?
Súper lindo! Gracias una vez más por compartir cosas tan padres y útiles!!! Besote =)
ResponderEliminarCuriosos efecto este ,esta hipnotizante
ResponderEliminarMuy lindo Potro a ver si me animo a ponerlo más adelante, un abrazo =)
ResponderEliminarHola Potro, aunque no venga al hilo del post que has escrito, quisiera hacerte una consulta, en primer lugar decirte que sigo mucho tu blog, bueno ahy voy, quiero en mi blog saber si se puede desplazar la caja de post hacia otra columna de sidebar, si no es asi como puedo colocar dos columnas bajo la caja de post, espero haberme explicado bien, mi url es http://www.elsevillista.net. Gracias y sigue asi
ResponderEliminarMerlina, gracias por el besote, otro pa' ti ;)
ResponderEliminarPozo+10™, busca esta parte de tu plantilla:
ResponderEliminar#content-wrapper {
width: 980px;
margin: 0px 0px 0px 0px;
Cambia lo que está en negrita por -14px
PeliculasTube, quizá hipnotizando logremos que los lectores se queden más tiempo :P
ResponderEliminarSilvia, si te animas ahí estará ;)
El Sevillista, no me ha quedado muy claro, ¿me puedes dar más detalles?
Potro mi blog como habras visto tiene tres columnas, la primera es la sidebar donde coloco gadgets, la sgeunda donde escribo los post y la tercera la sidebar de gadgets, mi duda es si ves la columna del centro donde escribo los post, debajo hay gadgets de imagen, html, etc..., como puedo puedo colocar un contenedor con dos columnas bajo donde escribo yo, gracias y perdona mi explicacion
ResponderEliminarMaG@S RaDioMuSiC, tal vez la entrada que hayas visto sea esta, saludos :)
ResponderEliminarEl Sevillista, entra en Diseño > Edición de HTML y SIN expandir los artilugios busca esta parte:
ResponderEliminar<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
Justo debajo agrega esto:
<div id='columna1' style='width: 49%; float: left; margin:0; text-align: left;'>
<b:section id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='columna2' style='width: 49%; float: right; margin:0; text-align: left;'>
<b:section id='col2' preferred='yes' style='float:left;'/>
</div>
Ya luego entra a Elementos de la página y añade los gadgets que quieras en esa área.
Gracias Potro, la verdad es que llevaba como dos semanas intentando de que manera podia, me ha servido mucho, mucchas gracias amigo y felicidades por tu magnifica pagina, te invito a que veas como ha quedado, http://www.elsevillista.net
ResponderEliminarbuen post lo del las barras mobibles es exactamente lo que buscaría alguién para diseñar su blog en flash
ResponderEliminarsaludos y cuídate.
Gracias por enseñarnos Potro.
ResponderEliminarUna pregunta: por qué a algunas personas al abrir mi blog me dicen que les sale propaganda y a la mayoria no? Es la computadora de esas personas las que están infectadas o algún gadget provoca eso?
saluditos
Es probable que sea un gadget que además de mostrar publicidad también guarda las cookies en los ordenadores, es por eso que quizá quien ya visitó tu blog no vuelve a ver esa publicidad porque las cookies ya están guardadas y quien lo ve por primera vez o por primera vez desde otro navegador se encuentra con esta publicidad.
ResponderEliminarPrueba entrar desde otro navegador donde nunca hayas entrado a tu blog o bien borra las cookies, caché e historial de tu navegador y luego entra a tu blog para ver si te topas con esa publicidad.
Usualmente los gadgets de contadores de visitas son los que insertan la publicidad intrusiva por si te sirve de pista.
Saludos!
Hola Potro.
ResponderEliminarInteresante efecto el de las barras, mi duda es si se puede hacer individualmente, es decir, en una estática en concreto o en una entrada.
Un saludo.
Yo quería preguntar lo mismo.
ResponderEliminarPero antes de esperar la respuesta aprovecho para saludarte.
¡Gran trabajo Potro!.
Saludos
Todo eso se puede hacer haciendo uso de las condicionales.
ResponderEliminarSaludos a ambos!
acabo de dar con este blog y la verdad no se por donde empezar a mirar , le he echado un vistacillo rapido y tiene mogollón de cosas,y bueno... ire viendo poco a poco para mi blog, muchas gracias y un saludo de vuestro seguidor 2000 jejeje
ResponderEliminarHola Potro, he seguido concienzudamente tus pautas para instalar las barras de colores de fondo pero sin obtener resultado. O sea, Diseño, html, pegar despues de head pero nada. Lo repetí varias veces, incluso pensé que podría ser debido al navegador Chrome, por lo que utilicé el IE pero nada. ¿Alguna pista?
ResponderEliminarGracias por tu constante ayuda.
http://masislam.com
No conocía el blog-multiautor-automático, pero está resultón ;)
ResponderEliminarGracias Potro, que tengas bonita semana.
ResponderEliminarJosico, bienvenido a Ciudad Blogger, y hombre habrá que hacerte algo porque efectivamente fuiste el número 2000, por suerte hice una captura de pantalla para recordarlo ;)
ResponderEliminar¡Saludos!
mexico, ahí mismo dentro del código de cada imagen después de:
ResponderEliminarmargin-top:-2px;
Agrega esto:
padding-right:50px;
Hola Musa Ta-Ha Bao,
ResponderEliminarProbablemente debe ser por algún otro script que es incompatible con las funciones de este, muy probablemente con el del cursor que usas.
Saludos!
Oloman, no es la mejor solución para los blogs colaborativos pero de que funciona, funciona ;)
ResponderEliminarAntes que nada felicitarlos por la excelente labor que prestan desinteresadamente a la comunidad. Me han sido de mucha ayuda las herramientas que aquí proporcionan.
ResponderEliminarTengo una duda, pero no están disponibles las consultas por correo electrónico de momento. Mi pregunta sería como puedo añadir gadgets a las páginas nuevas, que en cada pagina se muestre un gadget diferente.
Muchas gracias de antemano
Hola ツ carlos [я*],
ResponderEliminarMira esta entrada, verás que ahí se explica cómo mostrar gadgets sólo en las entradas, pero en tu caso, en lugar de agregar la primera línea que se menciona deberás agregar esta otra:
<b:if cond='data:blog.url == "URL de la entrada o página independiente"'>
Sólo cambia donde se indica la URL de la página donde quieres que se muestre sólo ese gadget.
Saludos.
Muchas gracias, ya había visto la entrada anteriormente y pues me fue de mucha ayuda.... ahora mismo lo pruebo...
ResponderEliminarDe verdad muy agradecido.
Muy bueno este efecto! Ya lo implementé, gracias!
ResponderEliminarExcelente espero probarlo pronto, muchas gracias por las cosas tan maravillosas que aportas, Bendiciones!!! Mua!!
ResponderEliminarhola potro me puedes ayudar en como elimino este espacio de my blog en la imagen te laremarke con rojo http://4.bp.blogspot.com/-uhIUhn3J1wg/TZIDop0Du7I/AAAAAAAAAQc/rnOZkuPrwTQ/s1600/r.png gracias por todo y disulpa tantas molestias
ResponderEliminarHola OWNNER - CHEOFLOW - CONTACT : 829-303-6918,
ResponderEliminarDesde hace poco más de un año Blogger implementó la autopaginación, esto es que sin importar cuántas entradas configures, Blogger decidirá cuántas son las entradas que se mostrarán en la portada.
Esta es una medida que tomó para aligerar la carga de los blogs ya que había quienes tenían infinidad de entradas en la portada y el tiempo de carga era monstruoso, situación poco favorable para los lectores.
Es por eso que si tu blog se ha vuelto más lento que antes entonces mostrará menos entradas.
No hay nada que puedas hacer mas que aligerar la carga de tu blog.
Gracias potro una duda en google chrome no cubre hasta bajo por qué?
ResponderEliminarenrique, Kary, gracias a ustedes por su visita!
ResponderEliminarEro-k'rlox, ¿en cuál blog?
ResponderEliminarCesar, cuestiones de cada navegador supongo :/
Hola Potro!! Sólo he pasado a saludarte, no todo va a ser hacerte trabajar, no?
ResponderEliminarMe parece muy chulo este efecto, aunque de momento sigo con mis lunarillos jeje
Cuídate mucho, te mando un beso!!
hola potro espero que me ayudes
ResponderEliminarquiero modificar ancho de las entradas y del sidebar
asi Main 686px - sidebar 272px
cuales lineas tengo que modificar en web www.lockerzlatinos.com
hola potro seria en este blog http://narutoshippudencolombi.blogspot.com/ medices como y yo lo ago en mis otros blogs gracias y aproposito colocaste un tutorial el nuevo es muy interesante
ResponderEliminarHola Mónica,
ResponderEliminarMuchas gracias por pasar y acordarte de los amigos :)
¡Saludos!
Dreko, pues sólo amplia el ancho del #container y de esas partes que ya conoces sus medidas.
ResponderEliminarEro-k'rlox, prueba encerrando el código del chat entre <div style="margin-top:-20px;"> y </div>
llave potro sos el mejor lo isieron con mucho amor al igual ke yo eres un genio gracias tan sencillo ke era soy brutoo
ResponderEliminarNo eres bruto, sólo no sabías cómo hacerlo ;)
ResponderEliminarSaludos!
Esa es la única razón por la que sucede tu problema, ya Blogger ha hablado sobre ello tanto en el foro de ayuda como en su blog oficial. Y 8.4 sí es algo tardado considerando que un blog 'optimo' debe estar debajo de los 5 segundos.
ResponderEliminarEste efecto y el de la disco son sencillamente elegantes!
ResponderEliminar¿Verdad que sí? :)
ResponderEliminarHOLAAAAAAA!!!
ResponderEliminarsoy seguidora de tu blog, y use este fondo en mi blog, pero tarda demaciado en aparecer, no se que onda con algun codigo o algo que meti la cuchara maaaaaaal(?) en fin :D
Te dejo mi blog para que chequees http://rrrrrromina.blogspot.com/ :D
Gracias genio.
Hola ·Romi Chuda·,
ResponderEliminarPuede ser pos dos cosas, una es que el blog es un poco tardado en cargar debido a los gadgets que tienes, videos en las entradas, etc.
Y otra es que al mismo tiempo usas el gadget para cambiar el color de fondo del blog a opción del lector, esto podría hacer que haga conflicto con este script y haga que tarde mucho.
Prueba quitando ese gadget, si con eso no se arregla entonces seguro es por la velocidad del blog.
Saludos!
y que me aconsejas para mejorar la velocidad de mi blog ?
ResponderEliminarQuizá con solo reducir un poco el número de entradas a mostrar en la portada (con dos menos estaría bien) y revalorar qué gadgets son realmente necesarios.
ResponderEliminarbueeeh!
ResponderEliminarGracias Genio ! saludos.
ES LO MAXIMO
ResponderEliminarhola tengo un problema instale este gadget y me alento la pagina y opte por borrarla y lo hice pero al abrir la pagina me sigue apareciendo donde o como le hago para borrarlo completamente mi blog es djspecialteamgto.blogspot.com
ResponderEliminaren la edicion html ya no aparece la borre igual como la puse , grax
Lo has puesto antes de </head>
ResponderEliminarAhí búscalo y podrás eliminarlo.
HOLA POTRO CAMBIE LOS VALORES ARRIBA DE LOS COLORES PERO AUN ME SIGUEN SALIENDO LOS MISMOS COLORES SOY NUEVA Y NO SE MUCHO DE ESO ESTE ES MI BLOG yeinimora.tk SOY MODELO EN COSTA RICA HECHAME UNA MANO NO SE COMO HACER ESO PORFA
ResponderEliminarHola yeinimoramodel, entré a tu blog peor no vi que tuvieras puesto el código de las barras, supongo que lo has eliminado.
ResponderEliminaramigo le pongo el codigo y no m lo acepta, q hago
ResponderEliminarSi te marca algún error verifica que cuando lo pongas no elimines nada sin querer, y que pongas todo el código completo.
ResponderEliminaroww me encanto el efecto de colores..!!
ResponderEliminarsaludos..
Lindo ¿verdad? :)
ResponderEliminarhooola tengo una duditaaa...
ResponderEliminarcomo es lo del tamaño?
solo pongo el numero o con la medida?
ej:
2cm
muy bueno el post
Sólo el número nada más ;)
EliminarHola potro
ResponderEliminarhe tenido inconveniente con mi blog las barras quedan estaticas, y quisiera saber como hago para que salgan en movimiento, espero una pronta respuesta
GRacias
este es el blog: http://nodoprofesionalesprogresistas.blogspot.com/
Quizá agregaste algún otro script que no es compatible con este, de por sí este script da algunos problemas :/
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola, pon el código antes de </body> de esa forma funcionará de nuevo.
EliminarSaludos.
Genial potro! te felicito y te agradesco mucho, ahora.. Lo hize y se me borraron el cursor de estrellitas, como hago para ponerlo de nuevo? y lo pongo y no me aparece..
ResponderEliminarNunca los he probado juntos Cintia, pero si poniendo uno te deja de funcionar el otro entonces hay un conflito entre ambos y habrá que elegir uno de ellos :(
EliminarHola potro, espero que estes bien mira yo he aplicado muchas cosas que tu nos haz enseñado en verdad mi blog esta hermoso desde que descubri esta pagina exhorto a que sigan adelante y muchas gracias estoy feliz gracias a todos por hacer tambien preguntas que a la vez la respuesta son excelentes por eso ya no pregunto porque todo esta resuelto en los comentarios Saludos fraternos
ResponderEliminarTe agradezco mucho tu amable comentario. ¡Un abrazo!
EliminarHola Potro eres el mejor WEBMASTER que he conocido!!!
ResponderEliminargracias por los codigos htmls todos me han funcionado al 100%.
Una pregunta que puedo hacer para que mi imagen gif de Matrix sea mas rápido ya que pesa 2mb : te dejo el link de mi blog :
www.g12360121.blogspot.com
Espero tu ayuda ya que algun día quiero ser como tú y poder crear paginas web como ciudadblogger.com y -- http://www.meomi.com/ (sabes como lo hizo su diseño) --
Muchas gracias Gregori CF :)
EliminarEl formato GIF de por sí es pesado, y más cuando se tiene una animación de muchas secuencias. A veces ayuda a reducir el peso si bajas la calidad de la imagen, pero no baja mucho su peso y la calidad se pierde considerablemente.
Las animaciones de meomi son SWF (flash), muy lindas, el problema es que ese tipo de animaciones no se ven en los dispositivos móviles :(
Gracias Potro .
Eliminar