Stylish Email Subscription Widget For Blogger

By
Advertisement

Get a professional email subscription box for blog Here is the widget which will increase your blog rss feed readers also . By this you can publish your post directly into visitor mail box so that visitor frequently get in touch with your blog updates . This email subscription box also improve target audience for your blog .

You Can Have Live Demo Click View Demo : 

You Can Have Live Demo


Tutorial : How To  Add Stylish Email Subscription Widget For Blogger 

#1. Log in to Blogger Dashboard .
#2. Now navigate to Layout Section . 
#3. Now Click on Add A Gadget .
#4. Now scroll to HTML/Javascript and Paste the below code .

<div align="center" id="bloggerslab">
<div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 id="bloggerslab-title-text" style="color: #000000; font-size: 20px;">
SUBSCRIBE OUR NEWSLETTER</h4>
<div id="bloggerslab-sub-title-txt" style="color: #333333; font-size: 14px;">
Join us for free and get valuable content , Killer tips delivered right through your inbox.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerslab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="bloggerslab_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br />
<input class="email" id="bloggerslab_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="bloggerslab" /><input name="loc" type="hidden" value="en_US" /> <input id="bloggerslab_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
<style>
#ig-subscription-optin {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxi0ySnS3nOXBE8iQhp2xomwpNN_lpgflI6ZwUCY8LnueH-PkTuJ4i6XDfU4Y_hGNEYGJ_yBh-h2o84zSWZL02jHSYfmDSmXACC_13S57-hdkIXcY4bHAiuJL8As081gWNASEnhRSrijGV/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinGVCQaZMfylQg9c2Vt0ASOzsuxLTvu_h2IjgC0WcdjFNOQcwEFym13bPpCZJpq0_-HU50aSHNyHbSKnLgfaIEJdTiWHhHy9nVJHreDQuLMzHYQR0z_k4Boe6ixd29azAgfNnQN00_7w7a/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h4 {margin-bottom: 8px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFFC00;}</style>

#5. Save Gadget . You had successfully added gadget to your blog .


Customization : 

 # Replace Bloggerslab (Colored Text in code) with your Feedburner username .


Don't Forgot To Share Our Articles -'Sharing Is Caring'

If you have any suggestion or query related please feel free to comment or contact us .


3 comments:

  1. Hey man,

    No doubt, your subscription widget is good. But, can you please include the border in it for better interface. Please do it. Thanks for the awesome post. Keep it up :D

    ReplyDelete
    Replies
    1. @Luker

      Thanks for commenting Luker , Ya i will release new version subscription widget in that you will have hover and also elegant border , Stay tune to Bloggerlab. Happy Blogging .

      Delete
  2. Nice Post

    www.vasimtamboli.com

    ReplyDelete