So guys Diwali is coming the festival of lights and I think you all might have planned something nourishing for this occasion, well I thought I should post something for my fellow website publishers who are planning to embed something good for this occasion right on their blog, well I found 3 good widgets you can say the one is fireworks, the second one is the rocket bottom to top scrolling widget and the last one is a simple greeting but really looks good with its pleasant sound effects.
I have even posted some nice greeting messages for your whatsapp and facebook friends that you can use to greet them this Diwali, those are simple messages and can be copied and posted easily.
So now lets get started on how you can easily add all these widgets onto your blog, so check below steps and enjoy.
#1. Back to Top Scrolling Rocket Boy Widget
Well you already knew about the scrolling widget people add onto their blog in order to allow any visitor to scroll to the top of the page by just clicking that button, well but now for this occasion we have a nice animated rocket widget that looks really good. So I do not have any demo link available but its easy to implement so have a look.
- Open
Blogger > Template > Edit HTML. - Press
Ctrl +F & search for</body>
tag & paste below code about it.<style>#backtotop{background:url(http://i.imgur.com/m4Z2HpS.png) 0 0 no-repeat;bottom:5px;cursor:pointer;height:130px;padding:5px;position:fixed;right:5px;width:72px;z-indez:1}#backtotop:hover{background:url(http://i.imgur.com/m4Z2HpS.png)no-repeat;background-position:0 -142px}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/><script type='text/javascript'>//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtotop").removeAttr("href");$("#backtotop").stop().animate({bottom:"0"},{duration:100,queue:false})}else{$("#backtotop").stop().animate({bottom:"30000"},{duration:8e3,queue:false})}});$(function(){$("#backtotop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})})//]]></script><a href='#' id='backtotop'/> - Now hit Save Template & refresh your blog to see this cool rocket boy in full action, so as you scroll down and click this blog he will take you up & launch away.
#2. Embed Diwali Greetings Card with Sound on Websites
Well this is another good widget that you can easily embed on your website to greet your visitor with melodious sounds and diya images. Quotes are outstanding and it looks really rick. Well you can add this widget onto your sidebar, so whenever someone click on play icon it starts playing, well this widget in action click below play button.
So now if you liked the above greetings card then you can embed this card onto your website easily by following below easy steps.
- Open
Blogger > Layout > Add Gadget. - Choose HTML/JavaScript Gadget option and then add below code into it.
<embed height="460" src="http://goo.gl/paIgV3" type="application/x-shockwave-flash" width="624"></embed>
- Now you can make some height and widget changes according to your blog.
- After making all the necessary changes press Save Template & refresh your blog.
So now your greetings card will be live on your blog, well you can even add this widget anywhere else just use the code provided and enjoy. Make sure not change that src url else your widget will not work properly.
#3. Awesome Fireworks Widget for Blogger Blogs
Wanna add the fireworks to your blog, well now you can easily add those awesome colorful fireworks using simple script below. Well I have embed a demo on this post, so you will be able to see that awesome fireworks show.
- Open
Blogger > Template > Edit HTML. - Press
Ctrl +F & search for</body>
tag & paste below code above it.<script type="text/javascript">//<![CDATA[
function write_fire(e){var t,n,r;stars[e+"r"]=createDiv("|",12);boddie.appendChild(stars[e+"r"]);for(t=bits*e;t<bits+bits*e;t++){stars[t]=createDiv("*",13);boddie.appendChild(stars[t])}}function createDiv(e,t){var n=document.createElement("div");n.style.font=t+"px monospace";n.style.position="absolute";n.style.backgroundColor="transparent";n.appendChild(document.createTextNode(e));return n}function launch(e){colour[e]=Math.floor(Math.random()*colours.length);Xpos[e+"r"]=swide*.5;Ypos[e+"r"]=shigh-5;bangheight[e]=Math.round((.5+Math.random())*shigh*.4);dX[e+"r"]=(Math.random()-.5)*swide/bangheight[e];if(dX[e+"r"]>1.25)stars[e+"r"].firstChild.nodeValue="/";else if(dX[e+"r"]<-1.25)stars[e+"r"].firstChild.nodeValue="\\";else stars[e+"r"].firstChild.nodeValue="|";stars[e+"r"].style.color=colours[colour[e]]}function bang(e){var t,n,r=0;for(t=bits*e;t<bits+bits*e;t++){n=stars[t].style;n.left=Xpos[t]+"px";n.top=Ypos[t]+"px";if(decay[t])decay[t]--;else r++;if(decay[t]==15)n.fontSize="7px";else if(decay[t]==7)n.fontSize="2px";else if(decay[t]==1)n.visibility="hidden";Xpos[t]+=dX[t];Ypos[t]+=dY[t]+=1.25/intensity[e]}if(r!=bits)setTimeout("bang("+e+")",speed)}function stepthrough(e){var t,n,r;var i=Xpos[e+"r"];var s=Ypos[e+"r"];Xpos[e+"r"]+=dX[e+"r"];Ypos[e+"r"]-=4;if(Ypos[e+"r"]<bangheight[e]){n=Math.floor(Math.random()*3*colours.length);intensity[e]=5+Math.random()*4;for(t=e*bits;t<bits+bits*e;t++){Xpos[t]=Xpos[e+"r"];Ypos[t]=Ypos[e+"r"];dY[t]=(Math.random()-.5)*intensity[e];dX[t]=(Math.random()-.5)*(intensity[e]-Math.abs(dY[t]))*1.25;decay[t]=16+Math.floor(Math.random()*16);r=stars[t];if(n<colours.length)r.style.color=colours[t%2?colour[e]:n];else if(n<2*colours.length)r.style.color=colours[colour[e]];else r.style.color=colours[t%colours.length];r.style.fontSize="13px";r.style.visibility="visible"}bang(e);launch(e)}stars[e+"r"].style.left=i+"px";stars[e+"r"].style.top=s+"px"}function set_width(){var e=999999;var t=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)e=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)t=document.documentElement.clientHeight}if(typeof self.innerWidth!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<e)e=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<t)t=self.innerHeight}if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<e)e=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<t)t=document.body.clientHeight}if(e==999999||t==999999){e=800;t=600}swide=e;shigh=t}var bits=80;var speed=33;var bangs=5;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 e;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(e=0;e<bangs;e++){write_fire(e);launch(e);setInterval("stepthrough("+e+")",speed)}}};window.onresize=set_width//]]></script> - Now hit Save Template and see your bursting blog by refreshing it :)
So guys this ends this special Diwali Occasion tutorial, well have fun and enjoy this Diwali occasion with peace, do comment if you find any problem using any of the widgets mentioned above.
(COMMENTS WILL LOAD AUTOMATICALLY)