Mil Trucos Blogger

Murciélagos volando que caen y se desvanecen en el blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

16 Comentarios

  1. Anonymous Anonymous
    Noviembre 1, 2012    

    wooo me encantaron seve muy bien saludos

    • Noviembre 1, 2012    

      Es un gran truco para el halloween, saludos amigo 😈

  2. Anonymous Anonymous
    Noviembre 1, 2012    

    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

  3. Noviembre 3, 2012    

    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¡¡

    • Noviembre 3, 2012    
    • Noviembre 3, 2012    

      Muchas gracias Juvinao¡¡.. Saludos 🙂

    • Noviembre 3, 2012    

      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¡¡

    • Noviembre 4, 2012    

      KARMELA te deje ese enlace para que revises el ultimo comentario de ese post, alli explico lo que necesitas.

    • Noviembre 4, 2012    

      Ah, perdón… Eso no lo revisé, lo siento… Vale pues ahora miro ese último comentario. Gracias por tu atención¡¡..

    • Noviembre 5, 2012    

      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¡¡¡ … 🙁

  4. Noviembre 5, 2012    

    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¡

    • Noviembre 5, 2012    

      KARMELA tranquila que no eres pesada :cold:, lo importante es que haz logrado añadir este efecto a tu blog.

      Saludos.

  5. Noviembre 6, 2012    

    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

    • Noviembre 7, 2012    

      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 😎

  6. Octubre 13, 2013    

    Gracias me a quedado de maravilla.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo