Wednesday, October 31, 2012

Falling Hearts ♥ Blogger Widget for Valentines Day

Falling HeartsShare some love with all your visitors now you can embed a heart falling widget in your blog for some romantic look, it looks simply awesome and installs just in seconds as explained below. The below code is manipulated from the Snow Widget so you may think that why snow is mentioned in the below code, well we just changed the image to the heart so you can also change it to anything according to your will.

Widget Installing Instructions :

1. Just log in to your Blogger Acc, and navigate to your Dashboard > Layout > Add Widget.
2. Now from the Menu choose HTML and JavaScript Widget and add the below code to it.

<script type="text/javascript">
 
  //Configure below to change URL path to the snow image
  var snowsrc="https://lh5.googleusercontent.com/--Y8lMhWCw7o/Tzl9S3BMk5I/AAAAAAAACnI/8_N6aNCu5sk/h120/Heart.png"
  // Configure below to change number of snow to render
  var no = 15;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;

  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://lh5.googleusercontent.com/--Y8lMhWCw7o/Tzl9S3BMk5I/AAAAAAAACnI/8_N6aNCu5sk/h120/Heart.png" : snowsrc
  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
     
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }
</script>


3. So now after pasting the above code simply hit Save and than just Refresh your blog and see beautiful hearts falling and spreading some love and romance on your blog.

Configuring Widget :

Well you can also configure this above code according to your preference like changing the amount of hearts falling and changing time they fade in and out all stuff like that so you can check for that thing in the starting of the code saying Configure below number of something.

1 comment:

  1. Techology We Can'T Live Without: Falling Hearts ♥ Blogger Widget For Valentines Day >>>>> Download Now

    >>>>> Download Full

    Techology We Can'T Live Without: Falling Hearts ♥ Blogger Widget For Valentines Day >>>>> Download LINK

    >>>>> Download Now

    Techology We Can'T Live Without: Falling Hearts ♥ Blogger Widget For Valentines Day >>>>> Download Full

    >>>>> Download LINK iT

    ReplyDelete

 

Pages

About Me

Bookmark & Share