
Para quienes les gusta disfrazar su blog en Halloween, o para quienes les gusta tener adornos macabros en el blog, este script les ayudará a darle ese aspecto de terror con unos fantasmas volando por todo el blog.
Puedes ver el ejemplo en este blog poseído de pruebas.
Ponerlo en el blog es sumamente sencillo, sólo basta entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pegar este código:
<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configuracion
var numberOfGhosts = 10; /* Numero de fantasmas */
var ghostSpeed = 0.9; /* Velocidad */
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Velocidad a la que desaparecen */
//Fin de la configuracion
var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
for (i = 0; i < numberOfGhosts; i++){
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/TLUwy8cYCsI/AAAAAAAAAZ0/kWv1B3tlak4/s1600/ghost.gif" class="ghost" width="70"/></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = ghostSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfGhosts; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfGhosts; i++){
strs[i] = document.getElementById("ghosts"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
<style>
.ghost {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
}
html {
overflow-x:hidden;
}
</style>
Con eso ya tendrán los fantasmas merodeando el blog. Se pueden modificar algunos valores de velocidad al gusto, esos se modifican en las anotaciones que he puesto en color verde.
NOTA: En las plantillas del diseñador de Blogger no funciona muy bien. Raro ¿no?
buenísimo, lo pondré el mero día, gracias
ResponderEliminarwau esto si que esta muy bueno, siempre sacas nuevas cosas para el halloween....
ResponderEliminarsaludos
fabuloso potro eres un genio, directamente a mi blog, que seguramente se vera increible,
ResponderEliminartienes razon en las plantillas del diseñador no se ven bien, bueno ni modo, pero eres un genio, gracias
ResponderEliminarSDK, ojalá te quede bien :)
ResponderEliminarCarlos Javier, qué bueno que te han gustado :)
lerh, benditas plantillas del diseñador :\
hola potro tengo una plantilla diseñada con artister puse el script y los fantasmas aparecen pero debajo de la plantilla y no se ven xk?
ResponderEliminarhaha se ven genial ;D
ResponderEliminarhaaaaaaaaaay padrisimos, mil, mil gracias, me encantaron
ResponderEliminarasi quedaron
http://lo-que-el-agua-se-llevo.blogspot.com
hajahaja excelente, muchas gracias wm ;)
ResponderEliminarsaludos
Ash! lástima que los que tengamos plantilla blogger no funcione! :(
ResponderEliminarEstá muy bueno.
Saludos!
INCREHIBLEE QUEDO MIREN http://www.lockerzlatinos.com/
ResponderEliminarta ueno el post man! gracias POTRO
ResponderEliminarHola Potro, Genial tu trucoo, yo he adornado mi blog, pues la cabecera he colocado una imagen de halloween... Y la fecha estaba arriba al cambiar la imagen la fecha se ha borrado... :(, Ayudame...
ResponderEliminarQué bueno, lo he puesto pero solo un fantasmita para que no moleste mucho
ResponderEliminarGracias Potro
ricardo osorio (administrador), no conozco las plantillas diseñadas con ese programa pero supongo que tienen el mismo problema que las del diseñador de Blogger.
ResponderEliminarAdmin, ¿verdad que sí? :)
Leticia Mtz, sólo los veo en la sidebar pero curiosamente me gusta mucho de ese modo :P
MCarlitooH2, ¿ya estudiaste wn? jajaja
Luis Kasanova, lo sé, pero poco sé sobre esas plantillas, sino seguro que vería el modo de hacerlos funcionar también ahí.
ResponderEliminarLockerz Latinos, no los vi :(
Microboy90, gracias a ti por tu visita :)
KatoGd, ¿en cuál blog?
Meri, creo que yo hubiera hecho lo mismo, dejando sólo dos o tres :)
muy bueno tu blog, me ago seguidor. gracias tambien por estos elementos para halloween ya que me han servido para adornar un poco mi blog. yo tambien los he compartido con mis seguidores, espero que no te importe :)
ResponderEliminarpasate por mi blog si quieres, saludos;)
http://zonaboom.blogspot.com/
¡Muy bueno!
ResponderEliminarmuy muy bueno!! muchas gracias
ResponderEliminarlo usare para halloween :D
Qué bueno que les ha gustado :)
ResponderEliminarPotro en zona 4 fire: http://tudiscolive.blogspot.com/
ResponderEliminarPues la fecha estaba alli arriba de la cabecera pero ya no aparece, y pues era que yo no tenia imagen sino lo tenia sencillo solo letras y la fecha si aparecia pero ahora se suprimio, al colocar la imagen!! :o
Muy bueno Potro, pero es verdad en las nuevas plantillas no funciona, tomè "prestada" tu imagen del fantasmita porque me encantò, espero no te moleste y si es asì, me avisas la saco ¿si?
ResponderEliminarSaludos!
Te luces como siempre Potro, excelente gadget. Saludos.
ResponderEliminarKatoGd, ¿aun tienes el código dentro del blog? porque ya no lo veo. Si lo has quitado ponlo de nuevo y dime cuál código usas, es decir, de dónde lo has sacado, de este modo podré ver dónde se puede reubicar.
ResponderEliminarMariangeles, ninguna molestia, es toda tuya ;)
LMGuillermo, te agradezco tu comentario, qué gusto que haya sido de tu satisfacción :)
Eres un genio tío, gracias a tu ayuda funcionamos.
ResponderEliminarSaludos.
¡Qué chulo!
ResponderEliminarmuy muy muy bueno me encanto!!!!! solo aqi encuentro cosas como esas lo pondre el merito dia gracias!!!
ResponderEliminarHola Potro! Muy curioso este truco. Ya lo puse en mi blog de pruebas y me funcionó perfectamente. Ahora voy a instalarlo en otro de mis blogs. Como, en lo personal, no soy partidaria del Halloween, solo le cambié la imagen por otra a mi gusto y me quedó justo como quería. Tal como Meri (coment. 14), yo también le dejé solo una imagen.
ResponderEliminarQuería saber si hay alguna manera de ajustarle el grado de transparencia de la imagen, si fuera posible.
Muchas gracias por todo, Potro, y saludos a todos!
guillemaro, sólo colaboro un poco, ustedes son los que realmente le dan vida a sus blogs :)
ResponderEliminarLucía Mon Amour, mucho muy chulo, me alegra que te hayan gustado.
Michelle Jacqueline, qué bueno que te ha gustado tanto como a mí.
Hola Vicky,
ResponderEliminarClaro, puedes modificar la transparencia a tu gusto. Eso se controla en esta parte que se encuentra al final del código:
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
Si deseas que sea menos transparente entonces pon valores más altos, por ejemplo, para que esté justo a la mitad de la transparencia los valores quedarían así:
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
Entre más altos sean los valores (no mayores a 9) menos opacidad tendrá.
Saludos.
Hola! Ahora sí me quedó tan clarita como el agua (no la imagen, sino tu explicación - ja,ja).
ResponderEliminarMuchas gracias por todo y muchos saludos a ti, Potro!
Buenisima aportacion potro, sin duda este blog es el mejor de todos, si algun dia te presentas a unos de esos concursos de blogger no dudare en votarte, ¡sigue asi!
ResponderEliminarPues si, los que visitan mi blog, deben ser fantasmas, porque ninguno comenta nada.
ResponderEliminarUn saludo
:O sorprendente efecto
ResponderEliminarToptrucos, entonces contaré con tu voto si un día lo necesito :D
ResponderEliminarGildo Kaldorana, habrá que contratar a una médium para que los haga hablar.
CHiCken, mucho :)
Potro a mi me funciono en mi blog pero el rproblema es que aparecen muy pequeños ¬¬'
ResponderEliminarpff
que mal u.u
Probablemente es porque cambiaste el width="70" por width="180"
ResponderEliminarDe hecho Potro, ese truco de la fecha es el mismo que tienes en el top... Osea es de tu autoria, y estaba super bien pero de un momento a otro cuando cargue la imagen se suprimio... Y el codigo sigue estando en la plantilla...
ResponderEliminarPues el script de la fecha no lo veo en tu blog, quizá lo eliminaste sin darte cuenta. Y en el caso de los estilos de la fecha también veo un error. Tienes esto en los estilos:
ResponderEliminarbody#layout #footer-wrapper .links,body#layout #search {
display:none;
fechadeldiapmargin:0;
color:#FFF;
padding:1px 0 3px 10px;
}
Si te fijas eso que está en negrita está mal y puede estar interfiriendo en alguna otra área sin darte cuenta.
YA ME DIO MELLO!!!! esta poseido !!!!!
ResponderEliminarA ver si no te jalan las patas cuando te descuides :D
ResponderEliminarpotro una pregunta! te hice el comentario en otro space y se me perdio! disculpa eso; esta la recordare! mi pregunta es: cuando tu dices colocar antes de "heart" y despues de: "cierta palabra q no recuerdo" no encuentro donde colocar eso! :( se q es edicion d html pero psz alli me pierdo.. hay muchos codigos, como encuentro esas palabritas.. :( espero tu respuestas hermano!! gracias (Y)
ResponderEliminarNo tengo idea de a cuál entrada te refieras :\
ResponderEliminarPero busca los códigos usando las teclas CTRL + F e igual prueba expandiendo los artilugios.
Lamentablemente no sé cuál entrada sea así que tampoco sé si es algún código que puede no estar en todo tipo de plantillas.
WOW!! Eres la neta, jejeje, esto es simplemente genial, mil gracias por hacer este súper post halloweenesco =P
ResponderEliminarGracias Merlina, qué buen que te gustó tanto como a mí :)
ResponderEliminarMuy bueno potro ..me gustaria saber como se ponen esas flechitas que estan a la derecha que indica arriba y abajo
ResponderEliminarEn esta entrada está la explicación.
ResponderEliminarSaludos.
hola Potro me preguntaba si habia alguna forma de cambiar el color del texto de todas mis entradas sin necesidad de editar cada una por separado, sino en una opcion o en la edicon html...gracias de antemano pronto
ResponderEliminarHola Ricardo Daniel,
ResponderEliminarEn esta área:
body {
background:#000000;
margin:0;
color:$textcolor;
Cambia ese $textcolor; o el código que tengas por el código del color que deseas, sin embargo, si a las entradas les has dado un color al momento de crearlas entonces esas entradas conservarán el color que les pusiste.
Sin embargo, si quieres que TODAS las entradas tengan el mismo color siempre y no cambien de color aun cuando edites las entradas entonces cambia esa parte:
color:$textcolor;
Por esta:
color:#FFFF00 !important;
De igual modo sólo modifica el color que deseas.
mil gracias potro..salu2
ResponderEliminarHola otra vez Potro, tengo otra duda; por que el contador de mi feed varia de numero, algunas veces esta en 30 otras en 9, ese contador solo toma en cuenta los usuarios conectado o los suscritos en mi blog?
ResponderEliminarPD: el contador que tengo es el que ofrece Ferrburn el cuadrito azul...gracias de antemano
El de Feedburner no es contador de visitas web, sino un contador de suscripciones al feed. Es normal que tenga variaciones, algunas veces varía un poco, pero otras es mucho.
ResponderEliminarSi pero esas variaciones ¿que significan? porque si una persona se suscribe no deberia desaparecer del feed, osea el numero no deberia disminuir hoy y volver al mismo numero mañana
ResponderEliminarLas personas así como los distintos servicios de feed se suscriben y se dejan de suscribir continuamente de cualquier feed, es por eso que hay esas variaciones. Pero no le hagas mucho caso, usualmente Feedburner tiene irregularidades con el número de suscriptores.
ResponderEliminarGRACIAS X LA ACLARATORIA POTRO SALU2
ResponderEliminarMuy bueno esto potro pero sabes no se por que a algunos les va bien y a mi por el contrario solo me muestra la imagen en un solo lugar si puedes mirala y si hay algo que hacer me gustaria saberlo aunque no se ve mal =P..
ResponderEliminarhttp://gremioaleaiactaest.blogspot.com/
Potro todo se soluciono ahora esta marchando bien bueno gracias por el detalle y tomarte la molestia de publicar estos adornos para darle un toque especial a nuestros sitios webs por una corta temporada =D
ResponderEliminarVale, me alegra que ya esté todo funcionando.
ResponderEliminarSaludos :)
Hola potro me preguntaba si es posible hacer que estos fantasmas no tengan transparencia pero al pasar el mouse por ellos se vuelvan transparentes, sería genial si encuentras la forma. Te quedó genial el truco.
ResponderEliminarHola potro ya lo solucione, use la propiedad :hover, pero gracias de todos modos.
ResponderEliminarYA LO PONGO EN MI BLOG!!!! EXCELENTE POTRO!!! COMO SIEMPRE MARAVILLOSAS IDEAS!!! GRACIAS!!!
ResponderEliminarBueno a un dia de Halloween hice uso de este simpatico aporte, asi quedo la cosa http://dragonballreborn.tk/
ResponderEliminarmuchas gracias como siempre :D
Jiraiya, no se me había ocurrido esa opción, buena, buena :)
ResponderEliminarKary, qué bueno que te ha gustado :)
Diragon, te ha quedado muy bien :)
Jajajajaja...esta fantástico Bro!! me encanta! Las animaciones son muy realistas, y como todos tus trucos, es muy sencillo.
ResponderEliminarEl del fuego tb lo acabo de ver e iguál! Fantástico y sencillo. (y combinados queda de lujo!!)
Un abrazo!!!
Acá entre nos, es un script sin imágenes que tuve que adaptar pensando que podría tener más potencial y parece que funcionó, aunque todo el crédito se lo lleva el que haya creado la imagen del fantasma.
ResponderEliminarQué bueno que te ha gustado bro, un abrazo!
o_Ó santo cielo Bro :S y después me niegas que eres un genio :S
ResponderEliminarLa verdad, me saco el sombrero Bro, felicitaciones por el trabajo... aún así no haya funcionado... y te agradecemos que pases horas frente a la PC haciendo estos trucos que nosotros aplicamos en menos de 5 min y quedan fantásticos.
Un abrazo!!
Muchas gracias bro =)
ResponderEliminarPotro.........como hago para q los fantasmas me salgan en el centro de la pagina....como tu blog.....xq a mi me salen a lado izquierdo
ResponderEliminarmira mi blog
www.moviefreelandia.blogspot.com
Prueba poner el gadget justo arriba de las entradas.
ResponderEliminarGracias.....ahora si me salió.......otra pregunta Potro......como hago para q la direccion cuando pones en el navegador d ves q salga s mundo pequeño......salga una imagen q le ponga ya....xq eh visto q le ponen la imagen q quieras......y eso quisiera saber......
ResponderEliminarMira esta entrada.
ResponderEliminargracias......ya lo agregué y si me salió.....
ResponderEliminarMis fantasmas salen detras de los enlaces porque?
ResponderEliminarEn esas plantillas no funciona bien Ady :/
ResponderEliminarOk Potro gracias...!!
ResponderEliminar:)
en la plantilla que yo tengo no se pueden ver los fantasmas verdad??? www.folkmetalmusik.blogspot.com
ResponderEliminarhey potro se puede cambiar la imagen
ResponderEliminarFINEM, lamentablemente en esas plantillas no funcionan bien.
ResponderEliminarCFH, claro, en el script verás esta URL, sólo cámbiala por la que quieras:
http://1.bp.blogspot.com/_dsEG33PDaHw/TLUwy8cYCsI/AAAAAAAAAZ0/kWv1B3tlak4/s1600/ghost.gif
excelente............gracias
ResponderEliminarJaja, muy original. Gracias por el código =)
ResponderEliminarOMG! Quedan super bien. Me extraña haber sabido ponerlos sin ayuda, XD Gracias, mi blog esta muy bien de halloween :)
ResponderEliminarA mí no me extraña, significa que cada día aprendes más y eso es super :)
ResponderEliminarGracias otra vez!!! Yo me decidí por dejar sólo un fantasma y queda muy bien. Creo que lo dejaré puesto todo el año...jejejeje ;-)
ResponderEliminarSon adictivos eh! ;)
ResponderEliminarNo me funciona... :(
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEn el código encontrarás una URL, esa es la imagen y que puedes cambiar por alguna otra.
EliminarSaludos.
potro dejame decirte que eres un maestro de maestros te felicito amigo
ResponderEliminarporto dejame decirte que eres un maestro de maestros te felicito amigo
ResponderEliminarpotro dejame decirte que eres un maestro de maestros te felicito amigo
ResponderEliminarNo lo soy, pero gracias.
Eliminar