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 .
Hey man,
ReplyDeleteNo 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
@Luker
DeleteThanks 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 .
Nice Post
ReplyDeletewww.vasimtamboli.com