How to Integrate Social Media Subscription Widget for Blogger Blogs

We all know for sure the essence of having an elegant clean style “social media” widget and the importance too of having “subscribe to feed” widget for blogger blogs. That is why most blog expert would say: “social media is the lifeblood that keeps your blog site glowing”.
<input type="hidden" name="IL_IN_ARTICLE">
Furthermore; this social sharing widget, comprises of “Facebook”, “Twitter” and “subscribe to feed” all together. The widget is unique on its own, and looks great on any blog site. It is highly responsive and can fit in any blog size ranging from small-to-big. The widget uses the Jquery, CSS, and HTML function.

Here is a sample:

 

 >>> SEE IT LIVE <<<

Steps on How to Integrate Social Media Subscription Widget for Blogger Blogs


I’ve integrated this widget on my other sites and it’s working just fine for me. Now; I guess it’s time I work you through the process on how to go about installing the widget on your blog.

To begin...

Simply follow the below highlighted steps:

Step #1:


Go to blogger: https://www.blogger.com

Step #2: 


Step #3: 


Step #4: 


Step #5: 


 

Find this "meta tag" <data:post.body/> ( hint: click on Ctrl+F for “Windows, Linux, and Chrome OS” and Ctrl-F for “Mac” to find code).

Step #6: 

Paste the below given code just below or after <data:post.body/>.


<!-- How to Add Social Media and Subscription Widget for Blogger Blogs START -->
 <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/techtonets" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWMreI8gmCTapNf4vJ0iY3lCnkeBeOUOzdJBP0u0Y_6BstQYOxUKFP5MoPOgQX1aJJ6mOd6lEMAnZdeGzHOKAU3h2npEXMzoow9Bt-0gIH5vFrwY91yEMJpcBxjL1RL5VVxf2WgpZz96NS/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%2Ftechtonets&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/techtonets" target="_blank">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshdNhbDc5XhGfh9TM2TfcFZ5vp73Fw0Di71T22rt8Qo9FrahMhcS5o8F6cIp2Jw-hVFxFifN0tLA91pfsJAphvRB0tVv9eq77Fj5a6T8mhroHueXk3D3_Mu8_0L3xk3zzecwupHoHNQOT/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=techtonets&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=techtonets', '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="techtonets" />          <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>

NOTE: This meta tag, <data:post.body/> may be repeated more than once. Try applying the above code to all the meta tag you find and see which works.


Before you hit the save button, ensure you edit the following, as seen in the code:

==> https://www.facebook.com/techtonets
==> techtonets
==> https://twitter.com/techtonets
==> techtonets
==> http://feedburner.google.com/fb/a/mailverify?uri=techtonets
==> techtonets

The above reflects the shadow of techtonets.blogspot.com, it's time you re-edit it so it reflet yours. The first two lines you see above, represents your Facebook Username, while the third and fourth represent your Twitter username and the other last two, represents your Feedburner ID address

Hit the "save" button once you done with all the necessary changes. Now preview your blog to see it in action. .

ENJOY !!!!

 
 

mondiad

mondiad Native ad

advertica