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"