Hoy es el día de Halloween en todo el mundo y muchos son los que me han enviado solicitudes sobre algún tutorial para este día, así que acatando estas solicitudes hoy les presento un truco que considero bastante bueno y es el de murciélagos volando que caen y se desvanecen en el blog, pueden ver un ejemplo en este blog de pruebas.
Para agregar este truco ve a Diseño | Añadir un gadget | HTML/Javascript y alli pegas lo siguiente:
<script>
/***** Murcielagos cayendo en el blog *****/
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['corazon']="https://lh5.googleusercontent.com/-2DdYLWXwyiA/TqdR9Ch1DYI/AAAAAAAAB0k/RbZ-RB8s6Q0/s106/murcielago4.gif";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['corazon']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>
Por ultimo guardas los cambios y listo; recuerda que el truco utiliza librería jQuery así que si no funciona ten en cuenta que se debe a la versión que usas de jQuery.
Espero que adornen sus blogs con este genial truco y pidan muchas golosinas en este Halloween.
16 comentarios
Anonymous · noviembre 1, 2012 a las 2:21 am
wooo me encantaron seve muy bien saludos
Juvinao · noviembre 1, 2012 a las 4:27 pm
Es un gran truco para el halloween, saludos amigo 😈
Anonymous · noviembre 1, 2012 a las 4:11 pm
Hola estoy buscando algun fanbox de facebook para ponerlo en el blog, osea que cuando entre al blog se muestre flotando como Amedias del blog y que tenga una opcion para cerrar saludos
Juvinao · noviembre 1, 2012 a las 7:16 pm
Amigo creo que esto te servira.
http://www.miltrucosblogger.info/2012/03/fanbox-de-facebook-flotante-con-la.html
KARMELA · noviembre 3, 2012 a las 3:16 am
Hola Juvinao, he estado un rato largo buscando en tu blog el efecto que tienes en tus gadgets como «de hoja levantada por las puntas de abajo», pero no lo he encontrado. Hace tiempo que lo he visto en algun que otro blog y me encantaría tenerlo en el mio… ¿Me podrías decir como hacerlo o si ya lo tienes publicado en tu blog??.. Sinceramente no he sido capaz de encontrarlo. Muchas gracias de antemano¡¡¡. Saludos¡¡
Juvinao · noviembre 3, 2012 a las 4:22 pm
KARMELA ve al siguiente enlace, alli explico como añadir ese efecto.
http://www.miltrucosblogger.info/2012/10/gadget-de-ultimos-comentarios-con.html?showComment=1351280146685#c413730579651483394
KARMELA · noviembre 3, 2012 a las 6:38 pm
Muchas gracias Juvinao¡¡.. Saludos 🙂
KARMELA · noviembre 3, 2012 a las 6:40 pm
Hola de nuevo Juvinao, te has confundido de post, ese el para ultimos comentarios¡¡¡… El que yo te digo es el efecto que tienes en tu lateral de hoja levantada por las puntas…. Bueno, pues quedo a la espera¡¡¡.. 😉 Gracias de nuevo¡¡
Juvinao · noviembre 4, 2012 a las 4:40 pm
KARMELA te deje ese enlace para que revises el ultimo comentario de ese post, alli explico lo que necesitas.
KARMELA · noviembre 4, 2012 a las 6:12 pm
Ah, perdón… Eso no lo revisé, lo siento… Vale pues ahora miro ese último comentario. Gracias por tu atención¡¡..
KARMELA · noviembre 5, 2012 a las 12:07 am
Hola de nuevo Juvinao, pues mira he hecho lo que dices de pegar el código .sidebar .widget{
background:#f4f4f1 url(http://1.bp.blogspot.com/-3hQzQ1me7fQ/TsND8VBCgdI/AAAAAAAAAcM/WwcUsy8x8aA/s1600/sidebar-bg.png) no-repeat center bottom;
margin:0 0 20px 0;
padding:15px 15px 30px 15px;
} encima (que supongo que será lo que quieres decir cuando dices «arriba») de ]]> y no me ha funcionado. No se ha modificado nada… Supongo que algo estoy haciendo mal, pero es que siempre que intento modificar la plantilla me pasa algo parecido… Ya estoy acostumbrada, por eso deje de modificar la plantilla y me he dedicado casi solo a poner CSS o gadget o wigdets que son menos complicados… ¡¡Dime que hago mal XD¡¡¡ … 🙁
KARMELA · noviembre 5, 2012 a las 1:28 am
Bueno, no te preocupes que ya he conseguido poner el código. Lo he puesto en CSS en Avanzado y ya me funciona¡¡.. Muchas gracias y perdona por ser tan pesada.. Saludos¡
Juvinao · noviembre 5, 2012 a las 9:14 pm
KARMELA tranquila que no eres pesada :cold:, lo importante es que haz logrado añadir este efecto a tu blog.
Saludos.
Marcos Omella · noviembre 6, 2012 a las 8:06 pm
Juviano Prodras esplicar en un blog este post de Daniel Abel
http://css.zanime-mf.com/2012/11/entradas-shadow-albums-blogger.html
Por favor
Juvinao · noviembre 7, 2012 a las 2:16 am
Marcos primero pidele soporte a Zero que el es el autor de ese truco,pero si no te puedes contactar con el, yo con gusto te brindare mi ayuda.
Saludos 😎
Carlos Knight · octubre 13, 2013 a las 11:53 pm
Gracias me a quedado de maravilla.