Stylish Floating Subscription Widget For Blogger Blog

Today I am going to give you a beautiful floating subscription box. When your visitors found a sum of useful content they look at the subscribe button but the problem is merely same with all of us, placing subscription box and widget in various column and spaces will take space and increases the site loading time. Floating bar gives you advantage from such problems, it will float with the scrolling so the visitors will be able to see it always.

<br /> <style> #topbar { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; position:absolute; background-color: #ffffff; width: 300px; visibility: hidden; z-index: 100; } } #email-news-subscribe .email-box{ padding: 5px 5px; font-family: "Arial","Helvetica",sans-serif; height:38px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#666 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333)); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:white; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background-image:-moz-linear-gradient(top,#333,#666); background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:#FFFFFF; } .emailicon { background: url("http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent; padding: 0px 20px 0px 95px; min-height:100px; margin: 0px; width: 183px; line-height: 20px; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); } .emailicon p { color:#FF8604; font-size: 20px; font-weight: normal; font-family: impact; padding:40 0px 10px 0px; margin:0; padding-top: 20px; line-height: 25px; text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6; } </style> <p> <!--[if IE]><br /> <style> #email-news-subscribe .email-box input.subscribe{ background: #333; } </style> <p> <![endif]--><script type="text/javascript"> var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 30 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visi bility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script>

  <div id="topbar" ><a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/-QXWj0qhpvJs/UQlnha2jRDI/AAAAAAAAD70/xXMJKZi2RA4/s1600/urlll.png" border="0" /></a> <div class="emailicon"> <p>Subscribe Us and Get Free Email Updates! </p> </div> <div id="email-news-subscribe"> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=allbloggingtool', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"><input type="hidden" value="allbloggingtool" name="uri"> <input type="hidden" name="loc" value="en_US"> <input class="subscribe" name="commit" type="submit" value="Subscribe"> </form> </div> </div> </div> <p>