Join Over 10,000 Blogger Tricks !

Monday, October 20, 2014

How to Add Email Subscription Box Widget for Blogger

Today's we give you blogger tips to Add Email Subscription Box Widget for Blogger for get more subscriber to your blog. You can get more traffic with Email subscription. We give you step by step guide to add email subscription box with Facebook, Twitter, Pinterest and Rss Subscriber Icons. This is very good looking and attractive widget for blogger to increase RSS subscriber with Facebook Fan Page, Twitter Account and Pinterest Icon.
Email Subscription Box Widget

Add Email Subscription Box to Blogger

We give you step by step guide to Add Email Subscription Box Widget for Blogger, Please follow below induction to add widget on your blog:

Step 1

Login into Blogger Dashboard

Step 2

Go to Layout and Click on Add Gadgets as shown in below picture.

Email Subscription Box

Step 3

When you click Add a Gadgets a new popup will be opened, select HTML/JavaScript from list.

Email Subscription Box

Step 4

Copy and paste below code:
 <style>   .NNBTsocial_box-email{   background:Fff no-repeat 0px 12px ; width:270px;float:center;font-size:1.4em;font-weight:bold;margin:2px 20px 0px 10px;color:#686B6C;  }  .NNBTsocial_box-emailsubmit{   background:#0084CE;cursor:pointer;  color:#fff; border:none;padding:3px;margin:0 0 0px 0;text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);   -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; font:12px sans-serif;  }   .NNBTsocial_box-emailsubmit:hover{   background:#E98313;   }   .textarea{   padding:2px; margin:0px 2px 0px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);   -moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;   width:200px; height:20px;color:#666;}  #socialboxNBT   {  text-align:center;font-weight:bold;padding:5px;border:1px solid black;width:300px;  -moz-box-shadow: 0px 0px 8px #000000;-webkit-box-shadow: 0px 0px 8px #000000;box-shadow: 0px 0px 8px #000000;}  </style>  <br />  <div id="socialboxNBT">  <a href="http://feeds.feedburner.com/haakblog" imageanchor="1" rel="nofollow" style="float: center; margin-left: .5em; margin-right: 1em;" target="blank"><img border="0" src="http://2.bp.blogspot.com/-Me9LxF5fd88/UftVNgkTeQI/AAAAAAAAAMc/86ydsLiCHvw/s1600/NNBT-rss.png" /></a>  Submit your Email Address to Get Free latest Articles Directly to your Inbox  <br />  <div class="NNBTsocial_box-email">  <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=NBTLab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">  <input class="textarea" gtbfieldid="3" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" type="text" value="Enter email address here..." />   <input name="uri" type="hidden" value="haakblog" /><input name="loc" type="hidden" value="en_US" />   <input class="NNBTsocial_box-emailsubmit" type="submit" value="Submit" />   </form>  </div>  <style class="text/css">  table  {border-bottom: 0px solid #E6E6E6;float: center;width: 300px;margin:-8px 0 0 0px;}  .subicons  {border-right: 0px solid #E6E6E6;}  .Fadeout {filter:alphaundefinedopacity=100);opacity: 1.0;border:0;  }  .Fadeout:hover{filter:alphaundefinedopacity=80);opacity: 0.8;border:0;  }  </style>  <br /><div class="table"><table>  <tbody><tr>  <td><div class="subicons">  <a class="Fadeout" href="http://www.facebook.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-NoRUNi2o45s/UftVLmpT6PI/AAAAAAAAAMI/nlKQi-I9WuA/s1600/NNBT-facebook-icon.png" /></a></div>  </td><td><div class="subicons">  <a class="Fadeout" href="http://www.twitter.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-MAFru3zy4EE/UftVOQ1B8kI/AAAAAAAAAMk/SUA-OcvzwH4/s1600/NNBT-twitter-icon.png" /></a></div>  </td>  <td><div class="subicons">  <a class="Fadeout" href="http://feeds.feedburner.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-UoedrevjRAY/UftVMZJgx0I/AAAAAAAAAMU/TZk4VCS-5ms/s1600/NNBT-rss-icon.png" /></a></div>  </td>  <td><a class="Fadeout" href="https://pinterest.com/haakblog" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-t1WD_pp9gGA/UftVLqu0oSI/AAAAAAAAAME/cDcPZn0Dp9o/s1600/NNBT-Pinterest-icon.png" /></a></td>  </tr></tbody></table></div></div>
<small>
<a style='align:center;' href='http://www.haakblog.com/2014/10/email-subscription-box-widget-blogger.html' target='_blank'>Subscription Widget</a></small>

Step 5

After copy and paste about code follow below steps to change your username:
  • Change  http://feeds.feedburner.com/haakblog to your Feed Burner Name
  • Change haakblog to Your Feedburner Username.
  • Change http://www.facebook.com/haakblog to your Facebook Page Name.
  • Change http://www.twitter.com/haakblog to yout Twitter Username.
  • Change http://feeds.feedburner.com/haakblog to Your Feed Burner Username.
  • Change https://pinterest.com/haakblog to your Pinterest Username.

Step 6

Click on save button.

If you have any question or update than you can contact with us any time at our E-mail support Haakblog@gmail.com. I am always ready for fixing your css/HTML issues, For personalized help, you can HIRE ME

If you like this post and wish to get more post like this when we add new tutorial about blogger then SUBSCRIBE TO OUR RSS FEED! At Below:

0 comments:

Post a Comment

Don't Forget To Join US Our Community
x