TUTORIAL IT

A twitter follow button allows your readers to easily follow your blog/site on Twitter. This helps in increasing your blog's page views since you'll have more return visitors to your blog. Also, more followers on your twitter account means you'll likely get more retweets on blog posts you've shared on twitter. On retweeting, their followers can also view the post and by this, you're actually promoting your blog on one of the largest social networking sites.

The twitter follow button widget can be placed in your blog's sidebar or footer. and below are the various sizes of the platform twitter follow button widget have been given, follow the steps below to add one on your blog.

 How to Add Twitter Follow Button Widget In Blogger

• From your Blogger Dashboard,
• Goto Layout
• Select 'Add a gadget'
• Click on 'HTML/Javascript' (refer to this post on how to add widgets/gadget in blogger layout)
  
• Copy the code for any of your preferred styles below and paste in the text field.
• Replace the fields specified 'Username' with your twitter username

Style 1

 Large Twitter Follow Button With Followers Count

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @USERNAME</a>
<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>

Style 2

Medium Twitter Follow Button With Followers Count

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="true" data-size="medium">Follow @USERNAME</a>
<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>

Large Twitter Follow Button Without Followers Count

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @USERNAME</a>
<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>

Medium Twitter Follow Button Without Followers Count 

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-size="medium">Follow @USERNAME</a>
<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>

• Save the gadget

<data:post.body/>

<data:post.body/>

<section class="newsletter">
    <h2>
    Tired of checking for new posts ?
    </h2>
    <div id="form-newsletter">
    <div class="social facebook">
    <a href="https://www.facebook.com/newsville" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmKt7iajFocWE5-ggDsBFfDErQ2YM7dZxAe9hkazqRf0GHJHLAEnaDDjGSEYyuASFcvI1Eq7SNaMGgTvcrcbMbzpwmie2D-_FlMlSi3G-EfiGFPYhFVZhiGIsJ6itWy1KUFQR-8jGQQFY/s1600/nl-facebook@2x.png" />
        </a>
        <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fnewsville&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
        </iframe>
      </div>
    <div class="social twitter">
    <a href="https://twitter.com/news_ville" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP4z0ZB7IaiU-tITV06aPK2ZA_RWGzDtci7XKA2kD5-knEeHxMUrSGYPY-UlsbSWpVrenswXt8FqWEviud7xDfWbbMHQtHHEYG196BCn5LxWz3jvgb03i7w-VzMKpWT2F6QXQPQJNHdD5h/s1600/nl-twitter@2x.png" />
        </a>
        <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=informationtutorial158&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
        </iframe>
        <script>
          !function(d,s,id){
            var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
            if(!d.getElementById(id)){
              js=d.createElement(s);
              js.id=id;
              js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
        </script>
      </div>
    <div class="newsletter-form">
    <fieldset>
    <h2>
           Get all posts directly in your mail.
          </h2>
    <div class="fields">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=informationtutorial158', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
              <input name="uri" type="hidden" value="informationtutorial158" />
              <input name="loc" type="hidden" value="en_US" />
              <input class="subscribe" name="commit" type="submit" value="Subscribe" />
            </form>
    </div>
    </fieldset>
    </div>
    </div>
    </section>
    <style>
    .newsletter{text-align:center;margin:20px 0;}
    .newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
    .newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
    .newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
    .newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
    .newsletter:after{clear:both}
    .newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
    .newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
    .newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
    .newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
    .newsletter .social a:hover img{transform:scale(1.1)}
    .newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
    .newsletter .social .social-box.fb-like{margin-left:-45px}
    .newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
    .newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
    .newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
    .newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
    .newsletter .newsletter-form fieldset .fields{position:relative}
    .fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
    .fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
    .fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
    </style>
    <script type="text/JavaScript">
    fontsize = function () {
        var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
        $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
    };
    $(window).resize(fontsize);
    $(document).ready(fontsize);
    </script> 

<data:post.body/>

How to Find The Gadget/Widget ID of Any Blogger Gadget

• From your Blogger Dashboard,
• Goto Layout.
• In the layout section, Click 'Edit' on the widget or gadget which you want to make sticky.
• Get the Widget's ID by checking the address bar.

How to Create a "Sticky" Floating Sidebar Widget in Blogger

On getting the widget ID, 

• Goto your Blogger Template
• Click on 'Edit HTML'
• Search for the tag </body>
• Copy this code and paste 'above' </body>

<script>
// Tutorial at http://www.informationtutorial15.blogspot.com/2015/11/how-make-blogger-widgetsgadgets-Sticky-float.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML9"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 

• Replace the highlighted field ("HTML9")from the code with the ID you copied for the blogger widget/gadget.
• Save your template.