Today we are gonna see how to add simple CSS Email Subscription Widget for Blogger. We have many posts on CSS HTML Codings. This widget is very easy to install, there is no need of HTML Editing
In last post we have discusessed about adding a "Add CSS FeedBurner Subscription Box v3 to Blogger" Its really a nice CSS3 Feedburner Subscription Box. But now here I'm gonna post a Simple Wide Classic but Full Premium and Professional Posts SignUp widget [Subscription Widget]
Now If you want something more professional, Pro Quality widget, then you are at right place on TechEthix.
Just check our live demo for this CSS Subscription Box.
Live Demo [please Subscribe us]
Want to add this widget to your blog ? [Absolutely Free]
Just follow these simple steps :1. Go to Blogger > Layout > Click Add Gadget > Select HTML/Java Script
2. Copy the following code, Paste in the box, Hit Save.
Before saving you have to change the techethix to your blog's Feed name.
<style> .email { clear: both; width: 100%; margin: 10px 0; } .emailbutton { background: #f7f8f9; background: -webkit-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: -moz-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: -o-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: -ms-linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); background: linear-gradientundefinedtop, #f7f8f9 0%, #e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 ); border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 6px 12px; margin:0; -webkit-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgbaundefined223,223,223,0.4); -moz-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgbaundefined223,223,223,0.4); box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgbaundefined223,223,223,0.4); color: #888 !important; text-shadow: 0 1px 0 #fff; line-height: 1.2; cursor: pointer; font-size: 13px; font-weight: bold; text-decoration: none !important; } .emailbutton:hover { background: #f1f1f1; background: -webkit-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: -moz-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: -o-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: -ms-linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); background: linear-gradientundefinedtop, #f1f1f1 0%, #e0e0e0 100%); filter: progid:DXImageTransform.Microsoft.gradientundefined startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 ); text-decoration:none !important; } .emailform { position: relative; width: 270px; background: #fff; margin: 0 auto; -webkit-box-shadow: 1px 1px 2px #dfdfdf; -moz-box-shadow: 1px 1px 2px #dfdfdf; box-shadow: 1px 1px 2px #dfdfdf; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #ddd; } .emailinput { width: 200px; height:18px; margin: 0 auto; padding: 8px 40px 8px 10px; border:none; background: none; font-family: georgia; font-style: italic; font-size: 14px; color: #666; } .emailbutton { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding: 9px; position: absolute; right: -2px; top: -1px; bottom: -1px; display:block; line-height:16px; } .emailbutton{ padding: 8px !important; } .emailinput { padding-right: 70px !important; width: 170px !important; } </style> <br /> <div class="email"> <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=techethix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="techethix" /> <input name="loc" type="hidden" value="en_US" /> <input class="emailinput" name="email" onblur="if undefinedthis.value == "") {this.value = "Enter your email...";}" onfocus="if undefinedthis.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." /> <input class="emailbutton" title="" type="submit" value="SignUp" /> </form> </div> <div style="text-align: right;"> <span style="font-family: Georgia, serif;"><span style="font-size: xx-small; line-height: 20px;"><a href="http://techethix.blogspot.com/2013/07/css-email-subscription-widget-blogger.html" target="_blank">get this widget</a></span></span></div>
After clicking save you can move your widget to any desired position you want.
Its done , go to your blog and check our simple css professional subscription box / signup widget.
Please Don't remove our attribution link from this widget [Be Honest Blogger]
Recommendation Our News Subscription Boxes [CSS and Professional Styles]
Don't Forget to add our Badge to your blog and subscribe to our News letter for Unique and latest blogger tricks directly into your inbox !
Keep sharing our tricks with your friends !
