Hace poco veíamos cómo poner el fondo del blog en movimiento al estilo groovy, ahora veremos cómo ponerle movimiento con unas luces de colores al estilo Disco de los 70s que están siempre en movimiento.
Puedes ver un ejemplo en este blog de pruebas.
El procedimiento es muy sencillo sólo basta insertar un script en el blog, para ello vamos a Diseño | Edición de HTML y antes de </body> pegamos lo siguiente:
<script type='text/javascript'>Al inicio del código, en var colsel están los códigos de los colores de las luces, puedes agregar tantos colores como quieras, sólo ten en cuenta que el último color siempre será el color de las luces que se ve en forma pausada.
// <![CDATA[
var colsel=new Array('#E80F02', '#DB52EE', '#45E350', '#E7E61A', '#0B82DE', '#D7DF01');
var speed=100;
/*
Blob space Graphic Effect
(c)2010 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/
window.onload=whizzy;
var div;
var ring=new Array();
var swide=screen.width;
var shigh=screen.height;
var count=0;
var roun=0;
var nour=0;
function whizzy() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='50%';
dvs.top='50%';
dvs.width='1px';
dvs.height='1px';
dvs.overflow='visible';
dvs.zIndex='-1';
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(div, document.body.firstChild);
for (i=0; i<30; i++) ring['col'+i]=new Array();
add_blobs();
zoomer();
}
function add_blobs() {
var f, h, i, j, k, w;
for (i=50; i<swide*1.5;) {
f=Math.floor(10+140*(i/swide)); // De 10 a 150
ring['row'+count]=new Array();
for (j=0; j<30; j++) {
h=-f/8+i/2*Math.cos(Math.PI*j/15);
w=f/5+i/2*Math.sin(Math.PI*j/15);
if (h-f/2>shigh/2 || h+f/2<-shigh/2 || w-f/2>swide/2 || w+f/2<-swide/2) continue;
k=document.createElement('div');
dvs=k.style;
dvs.position='absolute';
dvs.left=w-f/2+'px';
dvs.top=h-f/2+'px';
dvs.color=colsel[colsel.length-1];
k.appendChild(document.createTextNode(String.fromCharCode(9679)));
k.style.fontSize=f+'px';
ring['row'+count][j]=k;
ring['col'+j][count]=k;
div.appendChild(k);
}
count++;
i+=f*2;
}
nour=count;
}
function zoomer() {
for (var i=0; i<30; i++) {
var tc=Math.abs(-nour+roun)%(count-2);
if (tc<colsel.length && ring['col'+i][roun]) ring['col'+i][roun].style.color=colsel[tc];
}
if (++roun==count) {
roun=0;
nour++;
setTimeout('zoomer()', speed);
}
else zoomer();
}
// ]]>
</script>
En var speed podemos controlar la velocidad del efecto, con un número menor se verá más rápido.
Lo he probado en Safari, Opera, Firefox, Chrome e Internet Explorer y en todos funciona, sin embargo en Firefox los círculos se ven más pegados.
Y ahora sí, ¡a sacar los pantalones acampanados!
¡menudo efectazo! Perfect!!! Me lo coloco en el aniversario del blog, ¡molará mucho!!!! :P
ResponderEliminarGracias por este increible fondo! :)
.... es genial!!
ResponderEliminarWe Game / Emilio, ándale, para un aniversario queda de lujo!
ResponderEliminarObe, ¿verdad que sí? :)
Tengo una preguntita....
ResponderEliminarLo de la música es por la imagen de "Discos Stu" o del propio fondo?
Porque es rara.... jijiji
Miss Varieté, jajaja, no, el script no trae la música incluida, esa fue patrocinada por Discos Stu :D
ResponderEliminarMaG@S RaDioMuSiC, a ti por tu visita :)
:( no escuche la musiquita a de etar buena ... jajajaja muy buen efecto Potro me gusta, uff pero tendre que controlarme para que mi blog no se alente con tanto efecto
ResponderEliminarLo sé, esto de los efectos en el blog es como salir de compras :D
ResponderEliminarHola Potro :D muy buenas noches, Tengo una duda, no tiene nada q ver con este tema pero me atrevi a hacertela aqui,
ResponderEliminarQusiera saber como poner la cabezera de mi blog mas arriba?
Me Explico Mas: el blog tiene un espacio arriba y quisiera saber como ago q no quede espacio arriba solo la cabezera pegando de lo mas alto del blog.
Imagen de Muestra!
http://dl.dropbox.com/u/8944635/CiudadBlogger%202.PNG
El area Roja representa el espacio al que me Refiero
Muy bueno!!interesante debo decir jaja! por cierto potro necesito otra ayudita si no es molestia jeje.. sabes como podria centrar la cabecera de mi blog?...
ResponderEliminarhttp://otakus-mexicanos.blogspot.com/
muchos saludos, me encata la pag!
potro , para poner los colores , me das un ejemplo por favor!
ResponderEliminar๖ۣۜÇΣZΛЯۣ™ (CESAR JERICHO), ammm... ¿y en cuál blog?
ResponderEliminarlizeth-, prueba agregando antes de ]]></b:skin> esto:
.Header img {text-align:center;}
free, aquí están los códigos de los colores.
Bueno mi blog es wweonlive.com y me gustaria que me dijeras como pego la cabecera del blog a la parte de arriba sin que quede espacio.
ResponderEliminarhttp://dl.dropbox.com/u/8944635/CiudadBlogger%202.PNG
gracias potro!
ResponderEliminarEsta Cool....
ResponderEliminarq onda potro esta chido, solo me preguntaba si tienes la receta para poner el slideshow que tienes en este blog:= http://ciudadblogger-glider.blogspot.com/ .
ResponderEliminarotra pregunta.¿las entradas mas recientes se ponen en automatico??
graciotas carnal.
๖ۣۜÇΣZΛЯۣ™ (CESAR JERICHO,
ResponderEliminarBusca esta parte de tu plantilla:
#outer-wrapper {
Dentro de ella verás esto:
margin:0 auto;
Cambia ese 0 (cero) por -35px y listo.
FREDDY,
ResponderEliminarEn esta entrada puedes ver cómo se hace, pero la verdad es que no funciona en muchas plantillas, te recomiendo que uses algún otro, usando el buscador de aquí podrás encontrar otras opciones de slider.
Y no, ni con ese ni con otro slider se pueden poner de forma automática las entradas más recientes pero ya mismo estoy probando uno, si todo sale bien lo publico esta semana ;)
hola potro!! ya lo hice y no me funciono... otra opcion?
ResponderEliminarhttp://otakus-mexicanos.blogspot.com/
potro! ya le he arregaldo jeje.. muchas gracias de todas maneras!
ResponderEliminarsaludos!
buen efecto y la combinacion -imagenes-musica-fondo
ResponderEliminarme quede a escuchar la cancion tambien
Por mas que intento no consigo ponerlo lo pongo delante de lo que dices y nada me sale letras rojas
ResponderEliminarMuchisimas Gracias Potro!!
ResponderEliminarHola Potro como estas?
ResponderEliminarTe queria preguntar si sabes como se hace esto: en el sitio www.planetavelez.com.ar hecho en wordpress en el primer gadget de la derecha dice TWITTER/VIDEO/RECENT, osea que en un gadget se pueden ver tres elementos distintos...
Si sabes alguna forma de hacer esto, o algo parecido decime...
Saludos!
lizeth-, qué bueno que ya lo has resuelto :)
ResponderEliminarPeliculasTube, buena ¿no? Todo un clásico :)
VARRO, pues no veo que lo tengas puesto en el blog de tu perfil.
Coloush +16, no tengo un post sobre ello, pero busca en Google 'tabview blogger' y encontrarás varios tutoriales sobre ello, aunque la mayoría están en inglés.
gracias potro!!!
ResponderEliminarme puse a buscar y encontre esto mira:
http://www.bloggertipandtrick.net/2010/09/17-top-jquery-featured-content-sliders.html
estan buenos, pero el unico q pude implementar fue:
Featured Content Slider Using jQuery UI
de los q mas me gustaron!!
quieres q te pase como se instala??
por cierto lo puedes ver aqui
ResponderEliminarhttp://itzacatepec-ieee.blogspot.com/
¡Qué divertido! Te mejoras cada día.
ResponderEliminarExcelente el truco, potro. Gracias nuevamente
ResponderEliminarFREDDY, gracias pero no es necesario, mira.
ResponderEliminarm.p.moreno, esa era la idea, tener una opción para divertirnos un rato en el blog :)
Carlos Santos, a ti por tu visita!
potro 2 preguntitas.. 1 porque no aparecen ninguna de mis entradas cuando se las busca en google? solo aparece la pagina cuando la buscas... y 2- como pones google busqueda personalizada dentro del cuadro de busqueda? un saludo y gracias..
ResponderEliminarPorque aún no está bien posicionado tu blog, eso sucede con el tiempo.
ResponderEliminarEl buscador que uso es este:
http://ciudadblogger.com/2009/11/motor-de-busqueda-personalizada-de.html
Hola Potro.
ResponderEliminarÉste es my style!! Impresionante ;)
Me gustaría que me dijeras donde colocar la condicional para ponerlo en una estática con música incluída... este fondo lo meto con calzador si hace falta.
Gracias mil, eres el namber wan.
Un saludo.
Hola Tapestryworkerman,
ResponderEliminarSólo necesitas encerrar el código del script con la condicional que necesites:
http://ciudadblogger.com/2010/03/condicionales-de-blogger.html
La música la puedes poner directo dentro de la página estática que desees.
¡Saludos!
como se pone este efecto sólo en una página estática??
ResponderEliminarMira el comentario anterior al tuyo.
ResponderEliminaruh del potro a mi no me anda!
ResponderEliminarme dice esto.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "script" must be terminated by the matching end-tag "".
me ayudas.
Hola free,
ResponderEliminarLe faltaba una parte al código que tenía en la entrada y nadie me lo dijo :(
Ya lo he arreglado, copia y pega de nuevo ;)
Saludos.
jajaja. pense que era todo culpa mia. ya que no me salia!
ResponderEliminarte hago una pregunta potro.
ResponderEliminarabria un truco para poner una intro en el blog?
Pues hay varios métodos, yo por ahora no tengo ninguno pero en Oloblogger me parece que tienen dos.
ResponderEliminarpotro una pregunta, como puedo hacer que los visitantes de mi blog puedan descargar archivos, por ejemplo : mp3, imagenes... etc.
ResponderEliminarMete el archivo que quieres poner para descargar dentro de un comprimido ZIP o RAR. Luego sube ese archivo a un hosting y en el blog pon el enlace a ese archivo.
ResponderEliminargracias.
ResponderEliminarsera que sos pariente de martin del potro , jeje
gran tenista argentino.!
mentira un abraso potro!
Frío, frío :P
ResponderEliminarComo hago para sacar el efecto?
ResponderEliminarBusca el código que se menciona en la entrada y elimínalo.
ResponderEliminary como lo pusiste en una pagina aparte???
ResponderEliminarNo es una página aparte, es una página del mismo blog sólo que he usado códigos condicionales para ocultar elementos en esa parte del blog.
ResponderEliminarPor fin fin encontre alguien que sepas .Eres un crakkkkkkkkkkkkkk,me serviras de muchas ayuda.
ResponderEliminarUn saludo bavette.
¡Saludos Bavette!
ResponderEliminarHola Potro me puedes decir como cambiar el fondo del efecto a diferente color. por ejemplo de negro a blanco.
ResponderEliminarSaludos.
Hola lalocom, ahí en la entrada se explica dónde se cambia el color de las luces. Saludos.
ResponderEliminarGracias por la rapida respuesta Potro, pero lo que quiero cambiar es el fondo no las luces. Por ejemplo cuando pegue el codigo a mi me sale fondo blanco y tu blog de pruebas lo tienes en negro
ResponderEliminarGracias.
No tiene color de fondo, en realidad es transparente y se adapta al fondo que tengas en el blog. Yo en ese ejemplo el fondo es negro y por eso se ve así, si tu plantilla fuera igual de fondo negro también se verá así. Por lo tanto sólo cambia el color de fondo de tu plantilla al color que quieras ;)
ResponderEliminarSaludos.
Hola Pronto Muy Bueno El Post Pero tengo una pregunta como hago para que el fondo se vea en negro (como el blog de prueba) por que en mi blog aparece en blanco el fondo con las luces... y ps el fondo blanco mo me sirve ya que las letras están en ese color y no se alcanzan a leer... otra pregunta que no tiene que ver con este tema..
ResponderEliminarpero me podrias decir como hago para que cuando le den like a una entrada en mi blog (para facebook) en ves de esto:
"wwwdisneyandnick.blogspot.com
var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym.."
que sale actualmente salga una breve descripción de lo que se trata la publicación o el encabezado de la misma?
gracias
Mi blog es: http://wwwdisneyandnick.blogspot.com
Hola bayron,
ResponderEliminarQuitando el script de la fecha deberá de dejar de salir ese texto, aunque el cambio quizá no se note de inmediato.
El script de esta entrada no tiene un color de fondo determinado, mas bien toma el color de fondo que tenga tu blog.
Saludos.
Potro, este fondo de luces se ve solo en la mitad de mi blog porque :/, el blog es este:
ResponderEliminarhttp://www.SomosRecordando.blogspot.com
No veo que tengas el código en ese blog :/
ResponderEliminarHola Potro.
ResponderEliminarSe acerca el primer aniversario de La Sinapsis y quiero poner el efecto disco, la duda es que no escucho la música que recuerdo haber escuchado en su día y no encuentro nada que la muestre en el código (ningún mp3, por ejemplo.
Supongo que podré editar el contenido escrito del recuadro, no?.
Espero contestación ya que me quedan 16 días para el "cumpleaño" del blog, ya me contarás.
Un saludo.
Hola Tapestryworkerman,
ResponderEliminar¡Enhorabuena por el primer aniversario, que vengan muchos más!
Qué bueno que me avisaste lo de la música, lo que sucedió es que el usuario eliminó su cuenta y por eso ya no se escuchaba aquí, pero ya lo he corregido.
Lo que yo he hecho es poner un video de YouTube en la entrada, y para que no se vea sino que sólo se escuche, he modificado los valores de ancho y alto del reproductor a cero, de esa forma no es visible, pero sigue funcionando y se escucha.
Saludos.
Gracias por tus congratulations!
ResponderEliminarAhora que ya tienes solucionado el audio... no creas que te dejo tranquilo ;)
¿Se podría cambiar el color de fondo del recuadro?: cambiar el blanco por azul y, ya puestos, cambiar la imagen.
Gracias por todo Potro.
Un saludo.
Ammm, ya me perdí un poco. ¿Cuál recuadro blanco quieres cambiar por una imagen?
ResponderEliminar... UPS!! ya perdonarás, me hice a la idea de que se trataba de una "portada" antes de entrar al blog. En vez de una barra de progreso de carga (por ejemplo), el visitante se encontraba con la portada disco para luego acceder a la página.
ResponderEliminarHe colocado el código y he salido de dudas... :O
Gracias por tu paciencia, ahora a ver si encuentro un mp3 acorde al "wateke".
Un saludo Potro.
Seguro encontrarás el tema adecuado :)
ResponderEliminarSaludos.
Hola, muy buena tu página felicitaciones!. Es primera vez que escribo y mi pregunta es: ¿se le puede eliminar la música a éste gadget?, pues en mi blog tengo incorporada mi radio. Desde ya agradezco tu respuesta, saludos desde Temuco, Chile. Aquí el link de mi blog: http://apocalipsis80s.blogspot.com/
ResponderEliminar¡Bienvenido a Ciudad Blogger, RETROMUSIC ON LINE!
ResponderEliminarEl gadget no tiene música, yo le he puesto un reproductor sólo para ambientar el demo, pero cuando tú lo pongas no escucharás nada extra de lo que tú tengas en tu blog.
Saludos.
Hola Potro!!
ResponderEliminarLa de tiempos que llevaba esperando este momento!!:D
No he podido aguantar más y me he adelantado unos días... ya tengo el fondo y la música.
Pásate, si quieres, y echa un vistazo, a mí me gusta una barbaridad.
Me estoy pensando en cambiar la banda sonora de la página periódicamente, a lo que me surge una duda:
¿Podría hacerse de forma automática?, sin cambiar el reproductor, ya que éste, el público puede pararlo a su antojo y estéticamente es lo que quiero.
Gracias por todo Potro.
Un saludo.
¡Te ganó la tentación!
ResponderEliminarMe temo que no, si quieres que sea una única canción cada determinado tiempo tendrás que hacerlo manualmente. Como se trata de un reproductor sólo puedes o poner una canción, o poner varias canciones de forma continua.
Saludos.
Ok.
ResponderEliminarAhora otra duda, ¿podría salir este fondo sólo cuando se entrara en una entrada en concreto?. Supongo que tirando de condicionales,podría reproducirse un tema musical en concreto al entrar en dicha entrada.
La idea es que se vean las luces disco y esa música sólo cuando se entre en la entrada en cuestión y el blog siga igual.
Ya contarás.
Un saludo.
Claro, como dices, usando las condicionales puedes hacer que el script se ejecute en la entrada que elijas, y el reproductor que esté oculto en todas partes menos en la entrada que quieres:
ResponderEliminarhttp://ciudadblogger.com/2010/03/condicionales-de-blogger.html
http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
Gracias Potro por responderme!, y de nuevo felicitaciones, ojalá muchos más tuvieran tu disposición y voluntad para enseñarnos. Saludos!
ResponderEliminarGracias Potro.
ResponderEliminarSiguiendo tus consejos, ya tengo puestas unas cuantas condicionales, pero aún no había "personalizado" ningún fondo y tenía mis dudas. Así que, en breves, toquetearé códigos... a ver si lo consigo sin armar estropicios :)
Ups!, repasando los comentarios me he dado cuenta de que te pregunté lo mismo hace un tiempo, ya perdonarás.
Un saludo y gracias de nuevo.
RETROMUSIC ON LINE, gracias a ti por tu visita!
ResponderEliminarTapestryworkerman, suele pasar, yo igual tuve un vago recuerdo pero no estaba seguro ;)
No me sale Potro, no se por que.. hice todo TAL cual dice ahi pero no hay chances!
ResponderEliminarProbe tambien con otro efecto,el de las barras que se dispersan,pero tampoco me salio. Me dice que esta todo bien, que se pudo aplicar,pero cuando abro el blog NADA!. Me ayudass por favoor?? Gracias!
Algún otro script no debe dejar funcionar a este o el otro, tal vez sea el del cursor :/
ResponderEliminarPero tengo dos cursores juntos yo...Si borro uno voy a poder o tengo que borrar los dos?
ResponderEliminarSólo probando podrás saberlo. Intenta primero con el del texto que sigue al cursor, elimínalo, si eso te permite que este script funciona sabrás que era a causa de ese, sino elimina el otro. Si eliminando ambos tampoco funciona entonces debe haber algún otro script que es el que causa que no funcione este.
ResponderEliminarHola Potro, Primero Tus tutos son geniales.
ResponderEliminarSegundo, Mira yo en el fondo del blog tengo una imagen del pasto del futbol, tu sabrias como hacerle un efecto como si se moviera?
Gracias y sigue con tus tutoriales :D
No XXLeanXX, no conozco algún método que lo haga :S
Eliminareste efecto se puede utilizar en un intro para un blog?
ResponderEliminarNo, es sólo para las páginas del blog.
EliminarHola Potro, haces una labor excelente. Una preguntita, estos fondos animados no hacen que se ralentice la página para los visitantes? un saludo.
ResponderEliminarDesafortunadamente sí, por eso conviene usarlo sólo en "ocasiones especiales".
EliminarGracias por tu comentario!
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola Edson, sólo tienes que eliminar el background que está dentro de body {
EliminarPd. He eliminado el comentario por el aviso que está al final.