This widget will surely increase number of your social subscribers.If you are writing good posts and expecting more number of subscribers then this widget will surely help you.It contains an email subscription form,facebook like button,twitter follow button and some beautiful social icons at the right of the widget.This widget can be installed in one step,you just have to copy and paste code in your template.Now lets see how to add it into blogger blog?



How To Add Email Subscription Form To Blogger?


  1. First go to Blogger Dashboard > Template
  2. Download a copy of your template
  3. Click on Edit HTML
  4. Hit Proceed
  5. Check the Expand Widget Templates checkbox
  6. Find below code in your template

<data:post.body/>

add below piece of code just after/below of above code,

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
form.feedburner {
    margin: 20px 0 0;
    display: block;
    clear: both;
}

.helperbloggerstyle {
    background: url(http://2.bp.blogspot.com/-YHHzZ6_RLMU/T-1kl7RxNEI/AAAAAAAACD8/-0FyeWj00vo/s1600/helperblogger.com-email-icon.png) no-repeat scroll 4px center transparent;
    padding: 7px 15px 7px 35px;
    color: #666;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}

.helperbloggersubmit {
    color: #666;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -goog-ms-border-radius: 4px;
    border-radius: 4px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
    #FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#helperblogger-widget {
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -goog-ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    padding: 8px;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 480px;
    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: inset    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow: inset         0px 0px 8px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}

#helperblogger-widget:hover {
    background: none repeat scroll 0 0 #FFF;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}

#helperblogger-widget td {
    padding: 3px 0;
}
</style>

<center><br/><div id='helperblogger-widget'>
 <div id='emailwidget'>
  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
  <tbody>
  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
     Get free daily email updates!
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=hblogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
     <input name='uri' type='hidden' value='hblogger'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='helperbloggerstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
     <input alt='' class='helperbloggersubmit' title='' type='submit' value='Submit'/>
    </form>
   </td>
   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
     Follow us!
    </p>
    <a href='http://feeds.feedburner.com/hblogger' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://1.bp.blogspot.com/-MCuPoLmu9vs/T-1koEDzO6I/AAAAAAAACEU/01CNMKp86_k/s1600/helperblogger.com-rss.png'/></a>
    <a href='http://twitter.com/helperblogger' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-7LTPdi6MD_w/T-1ko16lqtI/AAAAAAAACEg/6ayFWM4zSlM/s1600/helperblogger.com-twitter.png'/></a>
    <a href='http://www.facebook.com/btsnts' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://4.bp.blogspot.com/-M8jY5Qg_58M/T-1kmmQ2Q-I/AAAAAAAACEA/m7eJvpsH09c/s1600/helperblogger.com-fb.png'/></a>
    <a href='https://plus.google.com/106527290580119996124/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-CnhgXrrD_8A/T-1knYqgPSI/AAAAAAAACEI/8SL6MLH5sZw/s1600/helperblogger.com-gplus.png'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.helperblogger.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true">
  </iframe>
  <a class='twitter-follow-button' href='http://twitter.com/helperblogger' rel='nofollow'></a>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
 </div>
</div>
</center>
</b:if>

  • Replace all(three) hblogger with your Feedburner Username
  • Replace all(two) btsnts with your Facebook Username
  • Replace all(two) helperblogger with your Twitter Username
  • Replace 106527290580119996124 with your Google + ID

Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.

Note - We have developed this widget with using doncaprio's code,if you want to share this widget with your readers then kindly link back to this article.

Post a Comment

  1. also using this on my blog see it www.bloggin.gs

    ReplyDelete
  2. thanks dude....now i am going to add this stuff on my blog...........

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. First of all i would thank you for providing some of the great gadgets..:)
    Thanks Dude..:)

    I Applied this widget it is visible but the borders out there are not,
    so it is looking scattered can you please check it out once.

    http://www.gotechnosavvy.com

    ReplyDelete
    Replies
    1. Hey follow below steps,

      Find below code where you have added above code,

      #helperblogger-widget {

      just below it add below lines,

      height: 200px;
      width: 530px;

      save your template.

      Delete
    2. Dude did that but still borders not visible..

      Now the modified code is-

      #helperblogger-widget {
      height: 200px;
      width: 530px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px;
      -goog-ms-border-radius: 10px 10px 10px 10px;
      border-radius: 10px;
      ----------------------------------

      http://www.gotechnosavvy.com

      Delete
  5. Hi,

    Will it work for wordpress based website too?

    I want to use it on my website http://stockssavvy.com but that is a wordpress based website.

    ReplyDelete
  6. hi this is not work in my site can u pls help me?
    www.dynamictrick.in

    ReplyDelete
  7. I too have tried all the instructions, and there is no box.
    I am really excited to look around and see all the bloggy goodies that I could learn. Thank you.

    ReplyDelete
  8. wow..its a nice subscription widget. I am adding it in my blog

    ReplyDelete
  9. ITS REALLY GREAT
    I AM USING THIS http://trickytricks4you.blogspot.in

    ReplyDelete
  10. good one but if i want make some chang like last news in seam bow how i can?

    ReplyDelete
  11. I have it at http://cuidadosforever.blogspot.com/
    Thanks bro.. you got great gadgets that are found no where..

    ReplyDelete
  12. i have more than 1 tags , help me

    ReplyDelete
  13. totally timewasting site nothing work :-(

    ReplyDelete
  14. Thx for share :), i have to adding tdis widged in my blog

    ReplyDelete
  15. :( my template don't have this code ( )
    is another code to replace that code?

    ReplyDelete
  16. what should i do if i dont want fb phootos of other??

    ReplyDelete
  17. What a nice post, i tried to add it to my blog but don't really like the Facebook, Google plus etc. button in front of it but the size of the box seems small, please how can I increase the size of the box

    ReplyDelete
  18. in my first try it didn't worked because there's so many so i tried for all of them but in my second try... it worked so to those saying it didn't work try it to all in your html... my problem is the text "Enter your email" is overlapping with the message image..

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. Great Post
    Visit Once Here : www.Topgsso.TK

    ReplyDelete
  21. hai
    please help me my blog http://spicyaunties.blogspot.in has been started one year back, it is running so nicely that google has deleted 3 times and they returned 2 times. The last time i.e on 6 Aug 2014 they deleted and did not returned my blog though i am giving request to them filling the request form daily please can u help me to get my blog

    ReplyDelete
  22. If your blog contains any +18 material then you have to tell blogger about it.
    Login to your blogger account > Search for Deleted Blogs link (on left side of your blogger account panel) > If your blog is there then click RESTORE button and your blog will be restored :)

    ReplyDelete
  23. No dashboard is not visible, but i have started new blog spicyaunties2.blogspot.in form there i am sending them request by clicking on deleted blogs .Please give me your mail id so that i can tell problems related to my blog

    ReplyDelete
  24. yes my blog contains +18 age images only but i have ran it for a year with a daily pageviews of 30k

    ReplyDelete
  25. How to create social content locker in blogger?
    http://trickzbucket.blogspot.com/2015/03/how-to-create-social-content-locker-in.html

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top