Wednesday, 17 July 2013

Super Email Subscription Widget For Blogger

 
 
In my earlier posts, I have shared lots of tips for bloggers to increase blog traffic, comments, followers, social share counts, readership and many things. And today I'll try to help you to increase your email subscribers by using an eyes catchy and stylish Email subscription box. As same as blog followers, email subscribers are also important for building a strong readership around our blog. 
 
They are the targeted audience and we must focus to increase our email subscribers as much as possible. But this can't be done without any email subscription gadget. We need to facilitate our readers with free email subscription service so that they can subscribe easily. 
 
This can be done by setting up feed-burner feed and adding a subscription widget into blog. The best position to add email newsletter widget is blog sidebar. So, let see how to add an email newsletter widget in blogger sidebar. You would like to see a preview of this gadget first.
 
Add Email Newsletter Widget to Blogger

Follow below steps to add this widget into your blog. It'll definitely increase your RSS subscribers.

  1. Navigate to your Blogger Blog > Layout > Add a gadget.

  2. Choose HTML/JavaScript.

  3. Now copy below code and paste into it.
<div align="center" id="bloggertipstricks">
<div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 id="bloggertipstricks-title-text" style="color: 000; font-size: 20px;">
SUBSCRIBE OUR NEWSLETTER</h4>
<div id="bloggertipstricks-sub-title-txt" style="color: 000; font-size: 14px;">
Join us for free and get valuable content 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=blogger tips and tricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="bloggertipstricks_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="bloggertipstricks_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="blogger tips and tricks" /><input name="loc" type="hidden" value="en_US" /> <input id="bloggertipstricks_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/AVvXsEhz4BVgom4Btyytbcl6sqHpU0O1a3ipbI4IMj5YcSOmbM_D7WoxxIosjesrkplQjVLWxeyqZ6uC73tkR9USHjhoHarp-OnU2LlVdWnleE-qbzgJ6Jg5YVZA1X8RFTuCy16gmUog-8TuuEE6/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/AVvXsEi2JyXZs0HjE0RofPGjjDP4Xb4QMaW4dVlNG9T_4NsnBCZek18cjy2zLOrRxdH2-HDPRPO4SED1yyEj5sbqapv3hq5nYN8gCYBZ4LBkTwh5LeBiFEGO3j9nRRZEHj91eHHm-2N2S-zmm3f4/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>
  1. Replace blogger tips and tricks with your feedburner username.

  2. Save the gadget.

  3. That's it!

No comments:

Post a Comment