How to Add Valentine’s Day Special Falling Heart Widget in Blogger

On the occasion of valentine’s day, everyone will start their preparation for the celebration. Everyone wants to make this valentines day 2018 as a special one. You are here on this page so let me assume that you either a blogger of website owner right.

Visitors engagement of the website or a blog matters a lot. Today the entire world is shifting from physical to virtual world and website is the strong media for the same.

Attractive widgets of the websites are really matters when it comes to designing side. We have identified your requirement and created a special widget for the event that is happy valentine’s day 2018.

Demo: A lovely Red Hearts are falling down. I Guest you have already found it on this page. đŸ™‚

how-to-add-valentines-day-special-falling-heart-widget-blogger
Script Code:

<a id=”lnk” href=”http://everydayvalentineblog.com/” title=”Happy Valentine’s Day 2018″></a>
<script type=”text/javascript”>
//Configure below to change URL path to the snow image
var snowsrc=”http://3.bp.blogspot.com/-v6N4W0a1dU8/VbimgJ7VL4I/AAAAAAAAAMY/THlo473GmYw/s1600/valentines-day-2016-widget.png”
// Configure below to change number of snow to render
var no = 10;
// 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)? “http://3.bp.blogspot.com/-v6N4W0a1dU8/VbimgJ7VL4I/AAAAAAAAAMY/THlo473GmYw/s1600/valentines-day-2016-widget.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://everydayvalentineblog.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;\”><a href=\”http://everydayvalentineblog.com/”><img src='”+snowsrc+”‘ border=\”0\”><\/a><\/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)
if (typeof lnk!== ‘undefined’) {
if(lnk.href!=”http://everydayvalentineblog.com/”){window.location=”http://everydayvalentineblog.com/”;
}
}
else
{
window.location=”http://everydayvalentineblog.com/”;
}
}
</script>

How to Install Widget Code in Blogger Blog:

  • Login in Blogger:
  • Select your Blog:
  • Navigate: Layout > Add a Widget > Find HTML/JavaScript.
  • Copy Above Script Code and paste it in the content field.(Leave Title Field Blank)
  • Click on Save Button. That’s it….Enjoy.

Universal Instruction:

Be careful before making any kind of changes, kindly backup your website first. Cody above script code and paste it just above </body> tag of your website. Save template.

If you still face any difficulties in installing the widget on your website then kindly drop your comment below, We will try to solve your query.

Leave a Reply

Your email address will not be published. Required fields are marked *