Social Follow Blogger Gadget

Social Follow Blogger Gadget: One of the best blogger gadgets which allows your readers to follow you and get your blog's updates on social networking sites is the social follow gadget. This means more loyal readers, increased traffic and number of followers.

You don't have to fill up your blog with separate social follow gadgets which can increase your blog's page load time. Socializing is necessary to increase you blog's popularity and another SEO technique since it appears in search results.


Also Read:  Twitter Feeds Widget For Blogger

                    Sliding Recent Posts Gadget For Blogger
                    How to Add 'Link to This Post Widget' to Blogger Post




How to Add Social Follow Gadget to Blogger


1. From your Blogger dashboard, go to 'Template'. As usual Backup your template before making any new changes to it.

2. Click 'Edit HTML'.Press ctrl+F and search for

<data:post.body/>

code in your blogger template and paste this code just 'below' the second or third <data:post.body/> in your template



<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/USERNAME" target="_blank">
          <img src="http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/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%2FUSERNAME&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/USER-ID" target="_blank">
          <img src="http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/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=USER-ID&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=USER-ID', '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="USER-ID" />
              <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> 



4. After adding the code given above on either the second or third <data:post.body/>, edit it and make some necessary changes in the USER-ID for each social network.

The first two are for Facebook which is the Username, the third and fourth are the Twitter handles and the last two are for Feedburner ID.

Finally, save the Template.

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Share on Google Plus

About Grace Joseph

Grace Joseph is an educational and tech blogger. Other than having passion for gadgets and generally the tech niche, she's a writer at heart and reading is forever a hobby.

0 comments:

Post a Comment