HackingUniversity - Hacks . Tricks . How-To's

08 February 2015

Add Falling Hearts ♥ Blogger Widget for Valentines Day

falling-hearts-blogger

Share 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.

  1. Open Blogger –> Template –> Edit HTML.
  2. Now press Ctrl + F and search for </body> tag and paste below code above it.

    <script type='text/javascript'>//<![CDATA[
    function iecompattest(){return document.compatMode&&document.compatMode!="BackCompat"?document.documentElement:document.body}function snowIE_NS6(){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){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=.02+Math.random()/10;sty[i]=.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"}var snowsrc="http://i.imgur.com/JIgmsH2.png";var no=15;var hidesnowtime=0;var snowdistance="pageheight";var ie4up=document.all?1:0;var ns6up=document.getElementById&&!document.all?1:0;var dx,xp,yp;var am,stx,sty;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("hackinguniversity.in")!=-1?"http://i.imgur.com/JIgmsH2.png":snowsrc;for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=.02+Math.random()/10;sty[i]=.7+Math.random();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://hackinguniversity.in"><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>')}}}if(ie4up||ns6up){snowIE_NS6();if(hidesnowtime>0)setTimeout("hidesnow()",hidesnowtime*1e3)}//]]></script>

  3. Now just Save Template and refresh your blog to see falling hearts.
  4. 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.

End of Romantic and ♥ly Tutorial

So here you go with another romantic tutorial if you wanna see 3 awesome ways to wish valentines day in a Geek way that you can check out this post, so have a very happy valentines day Gud Bye Folks.