Header Ads

Follow / Subscribe widget for blogger sidebar

One of the most important things in your blog is to have a simple yet attractive subscribe widget. Your readers will start following your blog through this subscribe widget which should have various options like a email subscription, twitter follow button, Facebook like button and many others. 

subscribe widget for blogger

We will be giving you the code for a simple subscribe widget for blogger for you to use on your blogs. The following subscribe widget has the email subscription, Facebook page like button, Google +1 button, twitter follow button and links to your other social profiles including Pinterest and YouTube. This is a all in one complete follow / subscribe widget for blogger blogs. 

Code for Subscribe widget for blogger sidebar

CSS part
<style>
#socialwidget{
 background:#F2F2F2;
 border:1px solid #d1d1d1;
        width: auto;
 }   
.grid{
 border-top: 1px solid #FFFFFF;
     border-bottom: 1px solid #D1D1D1;
     padding: 10px 5px;
 }
#googleplus{
        padding: 12px 22px;
}
#twitter-follow{
        padding: 10px 12px;
}

#socialwidget #suscribe{
 border-bottom:none;
 }
#social-icon {
 overflow:hidden;
 margin:0 auto;
 width:190px;
}
#social-icon li {
 float:left;
 display:block;
 list-style:none;
 margin-left:0;
 margin-right: 5px;
}
#social-icon li a {
 width:32px;
 height:32px;
 display:block;
}
</style>

Second Part
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=145098378911885";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Subscribe Widget -->
 <div id="socialwidget" class="widget">
  <div class="grid">
             <ul id="social-icon">
              <li id="rss"><a href="http://feeds.feedburner.com/WotTheTecH" rel="nofollow" target="_blank"><img src="https://lh6.googleusercontent.com/-zM7EO_HLc1E/T92XClnykUI/AAAAAAAABHo/lbuGYSuMr40/s52/rss%2520icon.png" height="35" width="35" /></a></li>
   <li id="reader"><a href="http://plus.google.com/109848734559953105851" rel="nofollow" target="_blank"><img src="https://lh5.googleusercontent.com/-g7XQA20Kbkk/T92XBps9iqI/AAAAAAAABHY/Ztp50kuvIlY/s52/google%2520plus%25201%2520icon.png" height="35" width="35"/></a></li>
   <li id="lin"><a href="http://in.linkedin.com/pub/suroor-wijdan/16/626/90" rel="nofollow" target="_blank"><img src="https://lh6.googleusercontent.com/-jcb7b9a1Sjk/T92XAI94VeI/AAAAAAAABHI/b-5LNCSnKe4/s52/linkedin%2520icon.png" height="35" width="35"/></a></li>
   <li id="ytub"><a href="http://www.youtube.com/user/suroorwijdan" rel="nofollow" target="_blank"><img alt="YouTube" src="https://lh6.googleusercontent.com/-fjkdL6w5cZU/T92XFcTf10I/AAAAAAAABIY/kFbEVwDR6U0/s52/youtube%2520icon.png" height="35" width="35"/></a></li>
   <li id="pintrest"><a href="http://pinterest.com/suroorwijdan/wotthetech/" rel="nofollow" target="_blank"><img src="https://lh5.googleusercontent.com/-BbYnNPkiSxA/T92XCKtfzEI/AAAAAAAABHg/Ob5YlbLLTZE/s52/pinterest%2520icon.png" height="35" width="35" alt="Pinterest" /></a></li>
  </ul>
  </div>
  <div id="twitter-follow" class="grid">
              <!-- Twitter Follow Button -->
   <a href="http://twitter.com/WotTheTecH" class="twitter-follow-button" data-show-count="true">Follow @WotTheTecH</a>
   <!-- Script in footer -->
   </div>
  
  <div id="googleplus" class="grid">
   <!-- Google plusone button -->
              <g:plusone annotation="inline" width="292" href="http://www.wotthetech.com"></g:plusone>
  </div>
  <div id="facebook-like" class="grid">
              <div id="fb-root"></div>
              <fb:like-box href="http://www.facebook.com/wotthetech" width="292" show_faces="false" border_color="" stream="false" header="false"></fb:like-box>
                 <!-- Script in footer -->
         </div>
  
  <div id="suscribe" class="grid">
   <form style="text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wotthetech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email here.." onblur="if (this.value == '') {this.value = 'type email for daily newsletter';}" onfocus="if (this.value == 'type email for daily newsletter') {this.value = '';}" style="width:175px" name="email"/>
    <input type="hidden" value="WotTheTecH" name="uri"/>
    <input type="hidden" name="loc" value="en_US"/>
    <input type="submit" value="Subscribe" style="background:#FFFFFF;" />
   </form>
</div><div id="credits" class="grid">
<a href="http://www.wotthetech.com"/>WotTheTecH</a></div></div>



Goto Layout => Add a Gadget => HTML/ JavaScript  than copy and paste the above code , first the CSS part and than the second code part and Click Save. That's it! your subscription widget for blogger would be live on your blog.

Don't Forget to replace my links with your blogs own social media URL's and feeds url. Feel free to comment below for any queries or help that you may need for the above subscribe widget for blogger blog.

Note: Please do not remove the credits from the widget, alot of time has gone in making this widget and is free for your own use. If you like my effort than please take a moment in sharing it. 
Related Posts Plugin for WordPress, Blogger...
Powered by Blogger.