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

Aunque San Valentín ya ha pasado, pues aquí te presentamos ahora una manera muy divertida de poner corazones flotantes a tu blog.

Lo que tienes que hacer es, simplemente copiar los códigos HTML y pegar en algunos de los widget o gadget de HTML de tu blog, esto es muy fácil y puedes agregarlo entrando a Diseño y listo.

Empezamos:

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']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-gcp-fEKhUC3hzKb2h5_e0-SQE6WgTeAySGH_Q6CPWBUVQe_MWCW4CoSNZXHXpiN8FJe4cZbXU7Hv0O6pEVSrS0a-p3zoJYj3SdsYbEQSnzUvaPEBzpAMUr3L3zWpzb0nneafLXbVaY/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>

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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZWLWqoNA4zhm8wUM4pZD6ppBdReviOVU53s44E1H6vEW5F3zNzYZ64w_RrwIZTiQXcnkwya4p3cjqmKlRTn4nPwHskDglgtRu4cAfytcaJ_jKBZKStpvOBs2cU8rp_GRgL6M3A-YKN-E/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>

Le das clic en guardar y listo, trabajo terminado…

Si te ha sido de utilidad

... COMENTA ...