Add Simple CSS Email Subscription Widget For Blogger







Sample:










---------------------------------------------------------------------------------------------------
hi Friends Today i'll Tell U How To Add a Subscribe  Widget To Blogger.


Step 1.

Goto Your Blogger>Yourblog.layout.






Step 2. 

Click On Add Gadget.






















 Step 3.


Click On HTML/JavaScript

















 Step 4.

Copy The Code Below And Pase On The Box























Code Here


  

<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.gr
adientundefined startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 ); border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-rad
ius: 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="e
mail" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if undefinedthis.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" 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>





Previous Post
Next Post