How to add Social Media Widget in Blogger Posts with Top Location

How to add Social Widget in Blogger Posts.  Thiss sharingappliance for blogspot blogs could be a light-weight version of JumboShare Counter. i will be able to therefore decision it JumboShare Simplified. It masses quicker and takes up negligible load time. Load time could be a major SEO issue and Google can rank you higher in SERPs as long as your webpage masses quicker and provides a user friendly interface.

Social Media Buttons Blogger Posts

I have created this light-weight sharing appliance by orientating all major social media Widget within a horizontal row. Users will toggle the appliance to expand or collapse the quantity of sharing buttons displayed. 

This appliance includes the subsequent social media Widget Blogger:

1. Facebook
2. GooglePlus +1
3. Twitter
4. LinkedIn
5. Pinterest
6. StumbleUpon
7. Buffer
8. Viber - Will automatically display in mobile devices
9. Whatsapp - Auto displayed in mobile devices
10. Print

These buttons have the precise same look and magnificence as their official counterparts. It uses the official stylesheet for Facebook, Google, Twitter and therefore the rest.

The viber and whatsapp share buttons can show solely in mobile devices like smartphones. Your guests will currently share your journal posts with their viber contacts and whatsapp friends. i'm victimisation Is Mobile Request condition to permit these buttons to show solely smartphones rather than victimisation CSS display:none.

You will like better to show this social sharing appliance just under journal post title otherwise you can show it at the lowest of each journal post. Lets get straight to figure.
Follow these straightforward steps:
1. Go To Blogger  Theme 
2. Click Edit markup language
3.Search for ]]> and paste the subsequent CSS code simply on top of ]></b:skin>

1. 
   /* ##### JumboShare Simplified ####### */
   #MBTshares-wrap{margin:20px 0px;border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}
   #MBTshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:11px;margin:0px 5px 0; line-height: 1.4em;}
   #horiz{position:relative; padding:0; margin:0;}
   #horiz #MBTshares{position:relative;top:-8px; padding-top:20px;}
   #MBTshares a:hover{text-decoration:none!important;}
   /***Facebook***/
   .mbt-fb{background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px;text-shadow:0 -1px 0 #354C8C;white-space:nowrap;text-shadow:0 -1px 0 #354C8C}
   .mbt-fb:focus,.mbt-fb:hover,.mbt-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}
   .mbt-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}
   .mbt-fb:hover, .mbt-fb:visited, .mbt-tw:hover,.mbt-tw:visited, .mbt-linkedin:hover ,.mbt-linkedin:visited{color:#fff!important;}
   /***Gplus, Pinit, Stumbleupon***/
   .mbt-gp{box-shadow:0 1px 0 rgba(0,0,0,0.05);transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#FFF;background-image:none;border:medium none;border-radius:2px;border:1px solid rgba(0,0,0,0.17);color:#262626;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px 0 4px;white-space:nowrap}
   .mbt-gp:hover, .mbt-gp:visited{color:#262626!important;}
   #MBTshares .pinit{background:#f9f9f9!important}
   #MBTshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}
   #MBTshares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
   #MBTshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}
   .mbt-gp:focus,.mbt-gp:hover,.mbt-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)}
   .mbt-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}
   .mbt-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px}
   #MBTshares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }
   /***LinkedIn***/
   .mbt-linkedin{transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:1px solid #066094;color:#fff;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap}
   @media screen and (-webkit-min-device-pixel-ratio:0) {
   .mbt-linkedin{padding:0 5px 0 1px}
   }
   .mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}
   .mbt-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}
   .mbt-linkedin .ibg{background:#0369A0 none repeat scroll 0 0;width:17px;display:inline-block;border-right:1px solid #006095;border-radius:2px;height:20px;padding:0 2px 0 1px;margin:0 2px 0 -1px}
   /**Twtter, Print, Whatsapp, viber**/
   .mbt-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box}
   .mbt-tw:focus,.mbt-tw:hover,.mbt-tw:active{background-color:#0C7ABF}
   .mbt-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0}
   .mbt-o{max-width:100%}
   .mbt-o,.mbtcount-o,.mbt-fb,.mbt-gp,.mbt-linkedin,.mbt-tw,.label,#mbtcount{display:inline-block;vertical-align:top}
   .mbtcount-o{position:relative;min-width:15px;height:17px;text-align:center;padding:1px 5px;margin-left:2px;background:#FFF none repeat scroll 0 0;border:1px solid #e7e7e7;border-radius:2px;display:none!important; }
   #MBTshares .printme {background-color:#333;}
   #MBTshares .printme:focus,#MBTshares .printme:hover,#MBTshares .printme:active{background-color:#000}
   #MBTshares .whatsapp{background-color:#73D40B;}
   #MBTshares .whatsapp i{font-size:15px!important;}
   #MBTshares .whatsapp:focus,#MBTshares .whatsapp:hover,#MBTshares .whatsapp:active{background-color:#65BA09}
   #MBTshares .viber{background-color:#7b519d;}
   #MBTshares .viber:focus,#MBTshares .viber:hover,#MBTshares .viber:active{background-color:#8558aa}
   #MBTshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }
   #mbtcount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
   #mbtcount:hover{text-decoration:none}
   #MBTshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
   #MBTshares .ext{min-height:18px!important}
   #MBTshares .arrow s,#MBTshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
   #MBTshares .arrow i{border-right-color:#FFF;left:2px;top:11px}
   .share-btn{position:relative;display:inline-block; display:none!important;}
   .share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:#73D40B;height:31px; line-height: 1.4em;}
   .share-btn .h4{font-size:12px;font-family:arial}

   
   /*#########Horizontal Switch###########*/
   .switchoff2{display:inline-block;}
   .mbtswitch2{padding:0 15px 0 3px;position:relative;top:-15px;margin:20px 0 0 3px;display:inline-block;max-width:30px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
   .mbtswitch2:hover{color:#73D40B}
   .mbtswitch2 i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
   .mbtswitch2 i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal}
   @media only screen and (max-width:230px) {
   .tcount{border-bottom: 2px solid #74D50C; border-right:none; min-width:100%;}
   #horiz #MBTshares {width: 100%;}

   4. Paste the subsequent code simply higher than within your template:
   (OPTIONAL STEP) Skip this step if you've got already supplemental JQuery and FontAwesome libraries within your templates.

2. <script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
   <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

   5.Next include the follow jQuery content simply above </body> tag 

3. <script type='text/javascript'>
           //<![CDATA[
           /* ##### FREE JUMBOSHARE SIMPLIFIED #######
   Developed by:www.chmuhabbatali.com
   Dual licensed under the MIT license and GPL license.
   Copyright (c) 2015-2016 STCnetwork.org
   */
   $(document).ready(function() {
   $(".mbtswitch").click(function(){$(".switchoff").slideToggle();if($(".mbtswitch i").attr("class")==="active"){$(".mbtswitch i").removeClass("active").addClass('inactive')}else if($(".mbtswitch i").attr("class")==="inactive"){$(".mbtswitch i").removeClass("inactive").addClass('active')}});

   $(".mbtswitch2").click(function(){$(".switchoff2").slideToggle();if($(".mbtswitch2 i").attr("class")==="active"){$(".mbtswitch2 i").removeClass("active").addClass('inactive')}else if($(".mbtswitch2 i").attr("class")==="inactive"){$(".mbtswitch2 i").removeClass("inactive").addClass('active')}});
   });
   //]]></script>

   6. Include Social Media Widget at Top/Bottom Of Every Blog Post 

Add Social Media Widget in Blogger  Every Blog Post

Follow these straightforward steps to feature sharing buttons slightly below each diary post title or the post footer:
Inside your theme, hunt for . This code is found double, once for mobile read and once for desktop read. thus contemplate the second look of solely.

Note: If you wish to indicate this horizontal sharing bar below post titles, then paste the subsequent hypertext markup language code simply on top of show the sharing bar in spite of appearance of every diary post then paste the subsequent hypertext markup language code slightly below  <data:post.body/>

If you wish to show the sharing buttons each at high and bottom of every diary post, then paste the subsequent hypertext markup language code once on top of and once below . 

<data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='MBTshares-wrap'>

<!--TOTAL-->
<div class='share-btn tcount' data-service='total'>
        <div class='count h2 anim'/>
        <div class='h4'>SHARES</div>
</div>
<span id='horiz'>

<!--FACEBOOK-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-fb' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook!'><i class='fa fa-facebook'/><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='facebook'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--PINTEREST-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp pinit' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Pin it!'><i class='fa fa-pinterest'/><span class='label'>Pin it</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='pinterest'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--TWITTER--> <div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-tw' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;-&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Twitter!'><i class='fa fa-twitter'/><span class='label'>Tweet</span></a>
</div>
</div>

<!--LINKEDIN--> <div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Linkedin!'><span class='ibg'><i class='fa fa-linkedin'/></span><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='linkedin'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--GOOGLE PLUS-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Google Plus!'><i class='fa fa-google-plus'/><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='google'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--STUMBLEUPON-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp stumb' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Stumble it!'><i class='fa fa-stumbleupon'/><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='stumbleupon'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<div class='switchoff2' style='display:none;'>

<!--BUFFER-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp' expr:href='&quot;https://buffer.com/add?url=&quot; + data:post.url + &quot;&amp;picture=&quot; + data:post.thumbnailUrl + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=stc_network&quot;' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Buffer!'><img class='bufferimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7bsOkXAPBBsFROLROkhMc0xzLE_nLj-vXHgKmIg1i_LzNiQEqXg8L6yWyHdEAiSz-3Et2crOLgLorwsNVvmcx3zSod61JATJQBEXN7v5ZYNFDW4IyrsMxJNBs7szH3G6EEtL0tWkDr59u/s1600/logo-icon.png'/><span class='label'>Buffer</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='buffer'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> <!-- WHATSAPP -->
  <div id='MBTshares'>
    <div class='mbt-o'>
      <a class='mbt-tw whatsapp' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on whatsapp!'><i class='fa fa-whatsapp'/><span class='label'>SMS</span></a>
    </div>
  </div>

<!-- VIBER -->
  <div id='MBTshares'>
    <div class='mbt-o'>
      <a class='mbt-tw viber' expr:href='&quot;viber://forward?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on viber!'><img class='viberimg' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuMOIUf7wzYfFTYLJ_IeI7TEK-am1-O27kuLcAQaXGm75DtG9EALr-YyGGUhDEcfI-RXCRPh7-FI4DOrRwmwRoQfEwe-ZKOYKAiPqoC2q6qUEHavt5hCPcsyL0p49KxRJdToXy11kOHME9/s1600/Icon_small.png'/><span class='label'>Share</span></a>
    </div>
  </div>
</b:if>

<!-- PRINT -->
  <div id='MBTshares'>
    <div class='mbt-o'>
      <a class='mbt-tw printme' href='javascript:window.print()' rel='nofollow' target='_blank' title='Print this page!'><i class='fa fa-print'/><span class='label'>Print</span></a>
    </div>
  </div>

</div> <!--switchoff-->

<span class='mbtswitch2'><i class='active'/></span>
</span>
</div></b:if>

Customization Guide:

• All button locations square measure labelled for straightforward readability. you'll simply change/swap the locations of button at intervals the convenience.
• Replace stc_network along with your buffer handle or profile username or just your diary title while not areas.
• If you want to show a social media button in mobile devices solely then paste its code within the yellow highlighted tags
• All buttons within the purple highlighted tags can stay hidden once page hundreds and can be displayed only if the user clicks the +/- toggle button. Buttons can show victimisation this toggle button that we tend to named the switch.
• If you want to feature additional buttons within the switch then merely copy its code and paste it within the purple switch tags.  <div class='switchoff2' style='display:none;'>

Spare your format and you are completely done!
Thanks for enjoy Social Media Widget In Blogger