How to add Happy Diwali Widgets in Blogger and WordPress


add Happy Diwali Widgets in Blogger and WordPress

Add Happy Diwali Widgets in Blogger and WordPress

How to add Happy Diwali Widgets in Blogger and WordPress

Diwali is the Indian Festival peoples are Enjoy with their Friends and family members with crackers, poojas and Prepare delicious sweets For more about a Diwali check the Wikipedia page.

Today Tutorial we are going to see about How to add Happy Diwali Widgets in Blogger and WordPress.

  • Mainly this is the Key Widget for event bloggers
  • Help to attract the website/blog readers and visitor’s

its very simple and very light weighted Widget and very easy to install


How to add Happy Diwali Widget in Blogger?

  • Open your Blogger Dashboard
  • Go to Template  and Choose Edit HTML
  • Use CTRL +F for Find the </body> Tag
  • Copy the Below Widget code and Paste it in the above </body> tag
<style>
 @media only screen and (max-width:480px) {
 .h_mbl {
 display: none !important;}
 }
 </style>
 <img src='https://4.bp.blogspot.com/-O8ms4XBGFys/WAZwvtn0lCI/AAAAAAAAEeA/wrXmt8PVqlg8X_vWs0HSQN2t6jtPCWwZQCPcB/s1600/mmdv-1r.gif' class="h_mbl" style='position:fixed; bottom: 0px;left:0px;border:none;z-index:5;'/>
 <img src='https://4.bp.blogspot.com/-O8ms4XBGFys/WAZwvtn0lCI/AAAAAAAAEeA/wrXmt8PVqlg8X_vWs0HSQN2t6jtPCWwZQCPcB/s1600/mmdv-1r.gif' class="h_mbl" style='position:fixed; bottom: 0px;right:0px;border:none;z-index:5;'/>
  • After that click Save Template and check your Blogger blog

How to add Happy Diwali Widget in Wordpress?

Method 1

  • Login to your WordPress dashboard
  • Go to Appearance > Widgets
  • Add New text widgets Copy and paste the below code on the Widget text box
<style>
 @media only screen and (max-width:480px) {
 .h_mbl {
 display: none !important;}
 }
 </style>
 <img src='https://4.bp.blogspot.com/-O8ms4XBGFys/WAZwvtn0lCI/AAAAAAAAEeA/wrXmt8PVqlg8X_vWs0HSQN2t6jtPCWwZQCPcB/s1600/mmdv-1r.gif' class="h_mbl" style='position:fixed; bottom: 0px;left:0px;border:none;z-index:5;'/>
 <img src='https://4.bp.blogspot.com/-O8ms4XBGFys/WAZwvtn0lCI/AAAAAAAAEeA/wrXmt8PVqlg8X_vWs0HSQN2t6jtPCWwZQCPcB/s1600/mmdv-1r.gif' class="h_mbl" style='position:fixed; bottom: 0px;right:0px;border:none;z-index:5;'/>
  • That’s all save Button and check your WordPress website

Method 2

If your WordPress theme Have Insert Header and Footer script box Feature means Just add this code in the Footer box.if your theme does not have this Feature means Install Header and Footer WordPress plugin.

Customization

  • If you want Display this widget on your website/blog Header Just replace bottom and add top
  • If you to want display this Widget for your Mobile visitor’s Just Remove class=”h_mbl”
  • If you want to add you Own images Just add your images just replace the default images with our images

Animated Diwali crackers clipart images

add Happy Diwali Widgets in Blogger and WordPress

add Happy Diwali Widgets in Blogger and WordPress

Updated – add Happy Diwali Widgets in Blogger and WordPress

If you want to display an Animated Firing rocket Just use the Below code [demo]

Installation Methods are same For Blogger add the above </body> For WordPress Follow the Method 2

<script type='text/javascript'>
// <![CDATA[
var bits=80;
var speed=43;
var bangs=8;
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");

var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;

window.onload=function() { if (document.getElementById) {
var i;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.overflow="visible";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.backgroundColor="transparent";
document.body.appendChild(boddie);
set_width();
for (i=0; i<bangs; i++) {
write_fire(i);
launch(i);
setInterval('stepthrough('+i+')', speed);
}
}}

function write_fire(N) {
var i, rlef, rdow;
stars[N+'r']=createDiv('|', 12);
boddie.appendChild(stars[N+'r']);
for (i=bits*N; i<bits+bits*N; i++) {
stars[i]=createDiv('*', 13);
boddie.appendChild(stars[i]);
}
}

function createDiv(char, size) {
var div=document.createElement("div");
div.style.font=size+"px monospace";
div.style.position="absolute";
div.style.backgroundColor="transparent";
div.appendChild(document.createTextNode(char));
return (div);
}

function launch(N) {
colour[N]=Math.floor(Math.random()*colours.length);
Xpos[N+"r"]=swide*0.5;
Ypos[N+"r"]=shigh-5;
bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="";
else stars[N+"r"].firstChild.nodeValue="|";
stars[N+"r"].style.color=colours[colour[N]];
}

function bang(N) {
var i, Z, A=0;
for (i=bits*N; i<bits+bits*N; i++) {
Z=stars[i].style;
Z.left=Xpos[i]+"px";
Z.top=Ypos[i]+"px";
if (decay[i]) decay[i]--;
else A++;
if (decay[i]==15) Z.fontSize="7px";
else if (decay[i]==7) Z.fontSize="2px";
else if (decay[i]==1) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity[N]);
}
if (A!=bits) setTimeout("bang("+N+")", speed);
}

function stepthrough(N) {
var i, M, Z;
var oldx=Xpos[N+"r"];
var oldy=Ypos[N+"r"];
Xpos[N+"r"]+=dX[N+"r"];
Ypos[N+"r"]-=4;
if (Ypos[N+"r"]<bangheight[N]) {
M=Math.floor(Math.random()*3*colours.length);
intensity[N]=5+Math.random()*4;
for (i=N*bits; i<bits+bits*N; i++) {
Xpos[i]=Xpos[N+"r"];
Ypos[i]=Ypos[N+"r"];
dY[i]=(Math.random()-0.5)*intensity[N];
dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
decay[i]=16+Math.floor(Math.random()*16);
Z=stars[i];
if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
else if (M<2*colours.length) Z.style.color=colours[colour[N]];
else Z.style.color=colours[i%colours.length];
Z.style.fontSize="13px";
Z.style.visibility="visible";
}
bang(N);
launch(N);
}
stars[N+"r"].style.left=oldx+"px";
stars[N+"r"].style.top=oldy+"px";
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
</script>

If you Need any help in Installation and Modification Feel Free to comment here I will help you 🙂

Keep Join with us More Diwali widgets and Cliparts on the Way.

Advance Happy Diwali 2016 to all..!


Was this article helpful?
Thanks!

Your feedback helps us improve Allwebtuts.com



72 Shares
+11
Tweet
Share18
Pin1
Stumble52