Add Falling Snow Flakes Effect Widget in Blogger Background

Preview

Live Demo

How to display Snow Falling Flakes on Blogger Background ?

1. Goto blogger > Choose your Blog > Layout > Add a Gadget

2. Select HTML/JavaScript and Paste the given below code, and save.

CODE:

<script type="text/javascript">   //Configure below to change URL path to the snow image   var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQSV6tx0zLYYHHX4V2q7luTmEgrUvfZX18RFRIx4jnIrOPof-ByxFATubO8VD7V-Y2DVhEHjLoFZwDsYXzyDpU_-XK4B-EjmKcqwTGv-6YasurJZLF_nZxkBVQM_7ZrP0NgrCYa-hU6Zc/s400/snow.gif"   // Configure below to change number of snow to render   var no = 30;   // 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://2.bp.blogspot.com/-MsCdyoGtGdA/UX5gk72qNoI/AAAAAAAAAfQ/LaKTmUG-aJM/s1600/snow+falling+effect.gif" : 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>

Customize:

You can change the number of falling snow flakes by replacing "var no = 30;" in the given above code, 30 is highlighted in the code.

Change 30 to 40 flakes, 40 to 50 flakes etc.

OR

Use this button to add this widget to blogger.

Read More

Simple Email Subscription Box Widget for Blogger

Preview

How to add this widget to blogger ?

1. Goto your blog > Layout > Add a Gadget

2. Choose HTML/JavaScript and paste the given below code after customization.

CODE:

<style>.rb-email{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4xFla7PF4LzvOAhSLmu6hwCqlFCO590vb0ZjoeG1xqk17Dhju5aFSrc9-rNdJbt3apOHdJvyzYWoKCWHyxf_CVyn49YmqyLsSAKPW-wEwaHZYuLsd6efTl-FOYIYfTPtwGS212ryerQEH/s1600/email.png) no-repeat 0px 12px ;width:300px;padding:10px 0 0 55px;float:left;font-size:1.4em;font-weight:bold;margin:0 0 10px 0;color:#686B6C;}
.rb-emailsubmit{background:#9B9895;cursor:pointer;color:#fff;border:none;padding:3px;text-shadow:0 -1px 1px rgba(0,0,0,0.25);-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:12px sans-serif;}.rb-emailsubmit:hover{background:#E98313;}.textarea{padding:2px;margin:6px 2px 6px 2px;background:#f9f9f9;border:1px solid #ccc;resize:none;box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;width:170px;color:#666;}
</style>
<div class="rb-email">Subscribe via Email<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=knowledge333', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here...&quot;;}" onfocus="if (this.value == &quot;Enter email address here...&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" /><input type="hidden" value="Knowledge333" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="rb-emailsubmit" value="Submit" type="submit" /></form></div>

Customize:

1. Replace "knowledge333" with your feed burner username.

2. You can change the heading "subscribe via Email" with your text.

Read More

Popup Window widget with Close Button in Blogger

Preview:

This is Popup window widget for blogger.
DEMO

Copy and paste this widget to your blogger.

Goto Layout > Add a Gadget > HTML/JavaScript

CODE:

<style>#topbar {height:30px;width:auto;background: #005094 url('http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg');background-repeat:repeat-x;text-align:left;padding-top:4px;}#adsground {height:auto;margin:0 auto;width: 336px;background:#fff;border-bottom:2px #005094 solid;border-right:2px #005094 solid;border-left:2px #005094 solid;text-align:Center;padding:4px;}
#headlineatas {opacity:1.0;height:auto;width:auto;position:fixed;top:180px;left:600px;border-bottom:1px #005094 solid;border-bottom:0px blue solid;color:#333;padding:0px;z-index:1001;font-size:13px;}</style><script type="text/javascript">function getValue(){document.getElementById("headlineatas").style.display = 'none';}</script><div id="headlineatas">
<div id="topbar">
<img align="left" style="padding-left:2px;" src="http://icons.iconarchive.com/icons/deleket/folder/24/Mozilla-Thunderbird-icon.png" /><span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Popup Window title here</span><span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"> <target="_blank" onclick="getValue()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQfcdh4P3K2Yu8gmx_OeoLTQxLyDoT2FKQMLKWm_KYPpyiiBr7gCdV2RDOsx4T1GVR9sxY5s71y31s8ncLvlV5VwjT-D7FJiH7-LfScgw6lbVWLo_W6O323-I8TWvJJVjwZ64_RAeKVUtm/s1600/close.png" /></target="_blank"></span></div>
<div id="adsground">
<h3>
<a href="http://knowledge333.blogspot.com/2013/12/online-popup-window-with-close-button.html">Get This Pop-up Window </a></h3>
<p align="left">
<h3>
</h3>
</p>
Put Your Text OR HTML CODE here to display in popup window<p>
<br/></p>
</div>
</div>

How to Customize this widget ?

1. Replace : "Popup Widnow title here" with your title.

2. Replace: "Put Your Text OR HTML CODE here to display in popup window" with your Text or HTML code, which will show in your popup window.

Read More

Place Meta Tag widget/gadget in blogger template for Better SEO

Goto > Blogger > Template > Edit HTML

Find <head> using "CTRL+F" search box.

Copy and paste below this meta tag code into your blogger <head> tag after customizing.

Meta Tag:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="Description" content="your blog search description here" />
</b:if>
<meta name="Keywords" content="write your keywords here" />
<meta name="Author" content="write author name here" />
<meta name="Robots" content="All" />

Customize:
Replace all highlighted text with your text.

Read More

Floating Social Bookmarking Share post widget on left in Blogger

Preview:

1. Goto Layout > Add a Gadget > HTML/JavaScript.

2. Copy and Paste the given below code in HTML/JaveScript.

CODE:

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script><script type="text/javascript">stLight.options({publisher: "c59a9fe4-e43f-4718-8b34-306fe893d5ba", doNotHash: true, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "c59a9fe4-e43f-4718-8b34-306fe893d5ba", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "buffer", "linkedin", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

Customize:
Your can place this share tool button on left or right side of your site page or blogger by changing left or right the highlighted code.

Read More