Pues ya que está cerca la celebración del año nuevo veamos cómo poner un script que me compartió xulinho que hará que se muestren fuegos artificiales en el blog.
Es un efecto sencillo pero que puede hacer amenas estas fechas de celebración o cualquier otra. Puedes ver el ejemplo en este blog de pruebas.
Colocarlo es muy sencillo, sólo entra en Diseño | Edición de HTML y antes de </head> agrega lo siguiente:
<script type='text/javascript'>En color verde he puesto las indicaciones de la configuración del script.
//<![CDATA[
// Fuegos artificiales
var bits=200; // Número de puntos
var intensity=10; // Intensidad de la explosión (recomendado entre 3 y 10)
var speed=30; // Velocidad (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
// Colores de los fuegos
var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}
function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
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";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
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;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>
Al igual que muchos de estos scripts las luces no llegan hasta abajo del blog; para modificar qué tanto abarcarán las luces se puede modificar donde está en negrita
var swide=800;El primer valor es el ancho y el segundo es el alto.
var shigh=600;
¿Otra opción? Qué tal esta explosión de estrellas.
En Google Chrome, si se ve, abrí el blog de pruebas en el explorador y se visualiza de maravilla, muy buen truco.
ResponderEliminarEntonces yo soy el "salado" porque no puedo verlos :(
ResponderEliminaryo tampocoooo
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarajaja tas loco, gracias de todas maneras D:
ResponderEliminarsaludos potro que pases un buen año nuevo
Yo estoy loco y tú estás "fashion" jajaja
ResponderEliminarFeliz año nuevo weón :D
Este comentario ha sido eliminado por el autor.
ResponderEliminarque chulo!!! me ha quedado muy bien.
ResponderEliminary que facil...
gracias
¡Ah,Potro! ¿Por qué será que siempre tienes lo ideal?
ResponderEliminarPD:Si,si se ve en Google Chrome,tal vez es lento tu PC u.u
Me gustaron mucho, pero no aparecen en mi página: http://fananimalcrossing.blogspot.com
ResponderEliminarUn saludo y feliz año!
Idennis12, podría ser por algún otro script que tienes en el blog :\
ResponderEliminarmiss-perea's, qué bueno que te ha gustado!
Clem23256, siendo así quitaré la nota sobre Google Chrome :)
Toptrucos/Emilio, al igual que Idennis12 puede ser debido por otro script que tienes en el blog.
MaG@S RaDioMuSiC, jaja, a ese paso tendrás que tomar terapia para controlar esos impulsos bloggeriles :P
jaajhajaja que andai viendo los comentarios de mi foto de perfil wn jajahaj
ResponderEliminarChau weon Fashion D:
Bien, para probar que esta web es la mejor de todas!, les dejo este links: http://www.recodescargas.com.ar/ es una web que la hice gracias a Ciudad Blogger. es impresionante lo rapido que carga y aun puedo optimizarla mas... solo es cuestion de tiempo... es que soy novato, sii, tengo tan solo 5 meses en esto de blogger y realmente gracias a Ciudad Blogger logre supera las 2 mil visitas diarias y a veces supero las 6 mil!!, sin SPAM!, es mas, algunos archivos tienen spam a los uploades originales. GRACIAS!!! es lo unico que puedo decir y siento que no alanza. Un abrazo!
ResponderEliminarGracias otro truquito más, uno mas lindo que el otro.
ResponderEliminarMCarlitooH2, jaja, pues eres famoso en Facebook, es imposible no ver los comentarios de las fotos :)
ResponderEliminarJose, vaya pues has hecho un excelente trabajo, difícilmente se consiguen tantas visitas en tan poco tiempo y estoy seguro que todo el mérito es tuyo. ¡Muchas gracias por el enlace!
Bernice, gracias a ti por tu visita :)
Esta bueno pero no lo entiendo, osea:
ResponderEliminarvar bits=200; // Número de puntos
var intensity=10; // Intensidad de la explosión (recomendado entre 3 y 10)
var speed=30; // Velocidad (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
// Colores de los fuegos
lo que esta despues del // tengo que borrar o colocar el numero? el numero es el 200? por ej en el numero de puntos...?!
mi potro hemoso... está hermoso el ejemplo asi que lo haré en mi blog... que inteligencia... gracias por pensar por nosotros... eres mi gran guia... muackiz mi potrito hermoso.
ResponderEliminarWadiisZ, lo que está en color verde es únicamente la nota sobre lo que se puede cambiar pero lo que debes modificar es el número que hay ahí.
ResponderEliminartiernita, hola preciosa, qué gusto leerte de nuevo por aquí :)
Eres genial! Gracias!!!!
ResponderEliminarLo instalé en todos mis blogs, jajajaj...
Yo, tampoco me he podido resistir.
¡¡ Feliz año nuevo !!
!Qué bonitooooo! Feliz 2011!!
ResponderEliminarSaludos desde Bilbao
Patricia
Hola de nuevo Potro:
ResponderEliminarMe gustaría ampliar el radio de la explosión dime como hacerlo.
Y FELIZ 2011
Saludos Potro!
ResponderEliminarEsta nítido esto, ojala lo hubieras publicado antes, para aplicarlo a los blogs que administro.
Siempre estas innovando, por eso tratándose de blogs, eres mi fuente de información predilecta.
Feliz 2011.
Viva Mexico!
Mi nombre es Cristina Velázquez y quiero invitarte a participar de una de mis iniciativas denominada "Tu Blog en mi Blog"
ResponderEliminarhttp://www.tublogenmiblog.blogspot.com/
Un espacio en donde cada uno de los “creativos” que en algún momento decidieron compartir, a través de un blog, sus ideas, reflexiones, conocimientos, y los de otras personas, puedan contar el por qué de esta iniciativa, qué los motivó a hacerlo, la experiencia, anécdotas y vivencias.
A la fecha, hay más de 390 publicaciones, con contenido educativo, presentados por sus autores.
Espero que te interese la propuesta de contarnos, a través de una entrada, acerca de tu publicación.
Cordialmente
Prof. Cristina Velázquez
http://www.cristinavelazquez.blogspot.com
Potro, te hago una consulta que no tiene nada que ver con este buen post...
ResponderEliminarEn mi página www.porvelez.com.ar en los post aparece el: 0 comentarios, a eso lo puedo modificar por una imagen que al hacer click te rediccione a los comentarios, la imagen dice algo de Comentar...
Saludos!
ESNAPRI, quizá nuestros propósitos de año nuevo sean dejar de ser Blogger-compulsivos (también me incluyo ahí) :D
ResponderEliminarPat.mm, saludos hasta Bilbao y feliz 2011 :)
FRANCISCO ADAME RODRIGUEZ, busca donde dice:
ResponderEliminardecay[i]=Math.floor((Math.random()*16)+16);
Ese último 16 cámbialo por un valor más alto, por ejemplo 56
De esa forma el radio de la explosión será más grande.
Roy, muchas gracias por tu comentario, también hubiese querido publicarlo antes pero la tos casi no me deja salir de la cama. ¡Saludos!
ResponderEliminarCristina Velázquez, muchas gracias por la invitación, al rato me daré una vuelta :)
Coloush +16, lo que puedes hacer es poner un ícono junto al link de los comentarios, esto puedes hacerlo agregando antes de ]]></b:skin> lo siguiente:
ResponderEliminar.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(URL de la imagen) center left no-repeat;
}
hola potro DTB... te cuento que he estado colocandole cierto detalles al blog y para saber donde los coloque los estoy separando por barras o guiones (eso es en edicion de HMTL)y luego que guardo los cambios esa separacion me aparecen arriba en el blog es decir que tambien lo esta leyendo como un comando que puedo hacer para quitarlo de allli o como lo coloco para que no lo lea... gracias espero tu pronta respuesta jaac_michael_2010@hotmail.com
ResponderEliminarSi el código que quieres ponerle la etiqueta para diferenciarlo está antes de </head> entonces se usa así:
ResponderEliminar<!-- Comentario -->
Y si el código está antes de ]]></b:skin> entonces la etiqueta de comentario se pone así:
/* Comentario */
Hola Potro, a horas de la desmadrugada en domingo,vengo a ver si me ayudas (otra vez jejeje)
ResponderEliminarYo puse estos fuegos artificiales y ahora como los quito?????????????? como que ya paso la euforia de el año nuevo y quiero estar lista para otro truco que nos vengas a regalar, mil gracias por tu ayuda.
ejem ejem creo que ya lo solucione, hice un backup de el blog antes de ponerle el truco de los fuegos artificiales para así ponerlo de nuevo cuando ya no los necesitara, y ya lo encontre jijiji, gracias de igual forma al sólo venir a pedirte ayuda se me ilumino el foco jajajaja.
ResponderEliminarBuen tutorial quiero que hagas uno de como poner tv o como poner tv a la red ok
ResponderEliminary gracias desde Perú!!!!
Bernice, por eso siempre es bueno tener un respaldo :)
ResponderEliminarPero igual si un día te sucede lo mismo sólo busca en la entrada el código que pusiste para saber qué código buscar en tu plantilla y eliminar.
ronald, hay uno para transmitir TV, usa el buscador y busca Transmitir video en vivo con Justin.tv
estan espectaculares esos juegos artifuciales..... gracias por publicarlos
ResponderEliminarGracias a ti por tu visita, qué bueno que te han gustado!
ResponderEliminarPotro buenas tardes, encuentro un problemita al colocar estos fuegos pirotecnicos en mi blog, ya que en los gadgets flash los fuegos se van por bajo, habrá alguna solución? desde ya muchas gracias, tus consejos y aportaciones sirven de muuuucho.
ResponderEliminarBuenas noches Ke buena Jutiapa. ¿En cuál blog lo has puesto?
ResponderEliminarNecesitaría verlo puesto en tu blog para ver qué puede estar pasando y así entender el problema.
Saludos.
Ups perdón jejeje, lo he colocado en www.kebuenajutiapa.blogspot.com Saludos!!!
ResponderEliminarPues acabo de probarlos en esa plantilla y funcionan bien, así que debe ser por algún otro script que usas.
ResponderEliminarPrueba con los que son en flash, pero en lugar de ponerlos antes de </body> ponlos después de <body>
Este comentario ha sido eliminado por el autor.
ResponderEliminarno funcionan los enlaces a los artículos :(
ResponderEliminar¿Cuál enlace no funciona?
ResponderEliminarHola Potro como estas?
ResponderEliminarPuse este efecto en mi blog porque el blog cumplía años
Al día siguiente cuando fui a buscar el script para borrarlo NO ESTABA
PORFA AYUDAMEE
Nombre del blog: Club Penguin Plisis
Montemar
Hola Montemar, entré a tu blog pero no los veo, supongo que ya los has podido eliminar.
EliminarSaludos.
Amigo intente otra forma de eliminarlos por eso no los encontrabas
Eliminarestaban en otra parte del html :(
Saludos
lo ise y no salio en mi blog pero bueno gracias :*
ResponderEliminarlo ise y no salio en mi blog pero bueno gracias :*
ResponderEliminar