Tutorial: Corazones volando por tu blog en San Valentín

Por La Mujer Mutante, desde Chile


Hola a todos, hoy les enseñaré como colocar corazones volando por sus sitios o blogs, así nos prepararemos para este San Valentín.

Vamos con el tutorial....

Lo único que hay que hacer es copiar uno de los dos códigos de los box de abajo y luego pegar el código en uno de los gadget o widget de HTML de su blog o sitio. El gadget lo puedes agregar en la configuración del mismo, en Diseño de Página o Elemento.

¡¡¡Así de fácil!!!


Corazones Rojos
<script>
/***** Corazones 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']="http://lh6.googleusercontent.com/-7-WYEBOVd7c/TzMiej4AFcI/AAAAAAAACLc/w2Fn6N9jwIU/s32/heart.png";$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>

Ver el blog de prueba


Corazones Rosados


<script language='javascript' type='text/javascript'>
//<![CDATA[
// Script original de Eloi Gallés Villaplana adaptado por CiudadBlogger.com

var numero = 8
var velocidad = 40
var imagenamor = "http://1.bp.blogspot.com/_dsEG33PDaHw/TJvpnh9N8BI/AAAAAAAAAYk/_kKV5ThdBFA/s1600/corazon.gif"

var ns4arriba = (document.layers) ? 1 : 0
var ie4arriba = (document.all) ? 1 : 0
var dombrowser = (document.getElementById) ? 1 : 0

var dx, xp, yp
var am, stx, sty
var i, doc_ancho = 1024, doc_alto = 768

function amor() {

    establece_dimensiones()

    dx = new Array()
    xp = new Array()
    yp = new Array()
    am = new Array()
    stx = new Array()
    sty = new Array();
    
    for (i = 0; i < numero; ++ i) {
        dx[i] = 0
        xp[i] = Math.random()*(doc_ancho-50)
        yp[i] = Math.random()*doc_alto
        am[i] = Math.random()*20
        stx[i] = 0.02 + Math.random()/10
        sty[i] = 0.7 + Math.random()
        if (document.layers) {
                 if (i == 0) {
                document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
                document.write("top=\"15\" visibility=\"show\"><img src=\"")
                document.write(imagenamor + "\" border=\"0\"></layer>")
                 } else {
                     document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
                     document.write("top=\"15\" visibility=\"show\"><img src=\"")
                     document.write(imagenamor + "\" border=\"0\"></layer>")
                 }
             } else if (document.all || document.getElementById) {
                 if (i == 0) {
                     document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
                     document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
                     document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
                     document.write(imagenamor + "\" border=\"0\"></div>")
                 } else {
                     document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
                     document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
                     document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
                     document.write(imagenamor + "\" border=\"0\"></div>")
                 }
             }
     }
    
    corazon()
}

function corazon() {
    for (i = 0; i < numero; ++ i) {
        yp[i] += sty[i];
        if (yp[i] > doc_alto) {
            xp[i] = Math.random()*(doc_ancho-am[i]-30)
            yp[i] = 0
            stx[i] = 0.02 + Math.random()/10
            sty[i] = 0.7 + Math.random()
            establece_dimensiones()
        }

        dx[i] += stx[i];

       
        if ( document.all ) {
            var imagen = eval("dot" + i )
            imagen.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])
            imagen.style.posTop = yp[i]
        }
       
        else if ( document.layers ) {
            var imagen = eval("document.dot" + i)
            imagen.left = xp[i] + am[i]*Math.sin(dx[i])
            imagen.top = yp[i]
        }
       
        else if ( document.getElementById ) {
            var imagen = document.getElementById( "dot" + i)
            imagen.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'
            imagen.style.top = yp[i] + 'px'
        }
    }

    setTimeout("corazon()", velocidad)
}
function establece_dimensiones() {
    if (self.innerHeight) {
        doc_ancho = self.innerWidth - 50
        doc_alto = self.innerHeight - 21
    } else if (document.documentElement && document.documentElement.clientHeight) {
        doc_ancho = document.documentElement.clientWidth
        doc_alto = document.documentElement.clientHeight - 25
   
    } else if (document.body) {
        doc_ancho = document.body.clientWidth
        doc_alto = document.body.clientHeight - 25
    }
}
//]]>
</script>
<script language='javascript' type='text/javascript'>
amor()
</script>

Ver el blog de prueba

Fuente del código ciudadblogger.com



Espero disfruten tanto como yo. Cualquier duda consultar en los comentarios, recuerda que siempre pueden encontrar más tutoriales: Toda la lista de tutoriales que tenemos en nuestro blog en "Todo Para tus Blogs".



CONVERSATION

7 ya son Blogger@s:

  1. Muchasss gracias por este aporte, me encantan como caen los corazones, quedan preciosos. Feliz San Valentín para tod@s

    ResponderEliminar
  2. Wow que monada, capaz y me lo llevo para uno de mis blogs, que es de amor :D

    ResponderEliminar
  3. Genial !
    Ya lo he puesto en mi blog !!
    Muchas gracias.
    Besos

    ResponderEliminar
  4. de nada chicas, que bueno que les gusto

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top