How to add Responsive Share Button with Counter in Blogger Blog

This time Go-Widget will share the tutorial "How to add Responsive Share Button with Counter in Blogger Blog" Yes, this is a share button widget that you often encounter in the blog put it. The function of the button widget is still the same share as the share button other widgets that allow visitors to share articles were deemed beneficial to social media.

This widget also supports responsive and added to the display counter plugin from  http: //donreach.com/social-share-count which will bring the number of shares that is clicked by visitors. To share the view of this button can mate look like the picture above.

Note: This widget uses fontawesome, make sure in the template already there is a link fontawesome.

How to Add Responsive Share Button with Counter in Blogger Blog

1. Log in to Blogger >> Template Editor >> Add the code below before ]]></b:skin> or </ style>

CSS - Go-widget

/* Share Button dengan Counter untuk Blogger by http://widgetmefor.blogspot.co.id*/

.gowidget_sharebutton{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}

.gowidget_sharebutton .share_blog {display:block;}

.gowidget_sharebutton .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}

.gowidget_sharebutton .share_blog .wrap1 {display:inline-block;width:31px;float:left;}

.gowidget_sharebutton .share_blog ul {margin:0;padding:0;}

.gowidget_sharebutton .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}

.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}

.gowidget_sharebutton .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}

.gowidget_sharebutton .share_blog .btn_fb{background:#3a579a}.gowidget_sharebutton .share_blog .btn_fb:hover{background:#314a83}.gowidget_sharebutton .share_blog .btn_twtr{background:#00abf0}.gowidget_sharebutton .share_blog .btn_twtr:hover{background:#0092cc}.gowidget_sharebutton .share_blog .btn_gplus{background:#df4a32}.gowidget_sharebutton .share_blog .btn_gplus:hover{background:#be3f2b}.gowidget_sharebutton .share_blog .btn_pntrst{background:#cd1c1f}.gowidget_sharebutton .share_blog .btn_pntrst:hover{background:#ae181a}.gowidget_sharebutton .share_blog .btn_linkdin{background:#2554BF}.gowidget_sharebutton .share_blog .btn_linkdin:hover{background:#224EB4}

.gowidget_sharebutton .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}

.gowidget_sharebutton .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}

.gowidget_sharebutton .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}

.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}

 @media only screen and (max-width: 979px) {

 .gowidget_sharebutton .share_blog .btn_linkdin {width:34px;}

.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn{display:none}}

 @media only screen and (max-width:768px) {

.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.gowidget_sharebutton .share_blog .wrap{min-width:34px}.gowidget_sharebutton .share_blog .btn_linkdin,.gowidget_sharebutton .share_blog .btn_pntrst{width:30px}.gowidget_sharebutton .share_blog ul li{margin:1px 3px}}

 @media only screen and (max-width:479px) {

 .gowidget_sharebutton .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.gowidget_sharebutton .share_blog ul li{width:25px;margin:2px;}.gowidget_sharebuttonn .share_blog .wrap{display:none}.gowidget_sharebutton .share_blog ul li .fa{width:25px}}

2. Add the following code just below or above <data: post.body /> or <div class = 'post-footer ">

HTML - Go-widget

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

<div class='gowidget_sharebutton'>

<div class='share_blog'>

<ul>

<li class='share'>

<div class='share-btn' data-service='total'>

<div class='count h4'/>

<div class='share h6'>SHARES</div>

</div>

</li>

  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>

<div class='wrap1'><i class='fa fa-facebook'/> </div>

  <div class='wrap'>Share</div>

  <div class='share-btn' data-service='facebook'>

        <div class='count'/></div>

  </a>

  </li>

  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @ArlinaDesign - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>

  <div class='wrap1'><i class='fa fa-twitter'/></div>

  <div class='wrap'>Tweet</div>

  <div class='share-btn' data-service='twitter'>

        <div class='count'/></div>

  </a>

  </li>

  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>

  <div class='wrap1'><i class='fa fa-google-plus'/></div>

  <div class='wrap'>Share</div>

  <div class='share-btn' data-service='google'>

        <div class='count'/></div>

  </a>

  </li>

  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>

  <div class='wrap1'><i class='fa fa-pinterest'/></div>

  <div class='wrap'>Pin</div>

  <div class='share-btn' data-service='pinterest'>

        <div class='count'/></div>

  </a>

  </li>

  <li class='btn_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>

  <div class='wrap1'><i class='fa fa-linkedin'/></div>

  <div class='wrap'>Share</div>

  <div class='share-btn' data-service='linkedin'>

        <div class='count'/></div>

  </a>

</li>

</ul>

</div>

</div>

</b:if>

Replace the code that is marked with your Twitter username.

3. Add the following code before the </body>

jQuery - Go-widget

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

<script type='text/javascript'>

//<![CDATA[

// Share Button with Counter by widgetmefor.blogspot.co.id

$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});

//]]>

</script>

</b:if>

4. Save the template and see the results.

If you have questions with the tutorial above, please leave a message in the comments box, thank you and hopefully useful .....

Facebook

Twitter

Pinterest

More

Less

Tumblr

Mix

E-Mail

GMail

LinkedIn

Reddit

XING

WhatsApp

Hacker News

VK

Telegram

OK

Messenger

Line

Copy Link