Add Responsive Custom Social Share Buttons With Counts For Blogger

0
How to Add Responsive Custom Social media Share Buttons With Counter For Blogger
In this article today we are going to explain how to add custom social media share buttons with counter to below blogger posts.These social media buttons are made of HTML and CSS because of this it will not effect your page loading.you can add these buttons to below the blogger post titles or in footer to increase the social media shares of your website or blog.some features of this responsive fully custom social media share buttons are as follows.
1. Fully Responsive Design
2. Pure CSS and HTML
3. Social Media Plugin Comes With Social Counts
4. Integration of Fontawesome icons

How To Add Responsive Custom Social Media Buttons With Counts

Installation Steps:

1. Go to Blogger Dashboard -> Template -> Edit HTML ,Do Not Forget to take backup of your template.
2. Now Search for <head> and just below that,paste the following code.(Only If your template does not have fontawesome icons.)
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
Now Add one more API to make sure counts work perfectly.(Only if your template does not have API)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
3.Now Search for </head> and paste the following css just below it.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Horizontal Social Media Share Buttons for Blogger
Designed by:: http://www.bloggersstand.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome
******** Do Not Remove These Credits ********
------------------------------------------------------------*/
.bsd_horizontal_sharebar {
    position: relative;
    background: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0px;
    border-top: 1px dotted rgba(0, 0, 0, 0.05);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.bsd_horizontal_sharebar .Share_buttons {
 display: block;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    min-width: 41px;
}
.bsd_horizontal_sharebar .Share_buttons .wrap1 {
    display: inline-block;
    width: 31px;
    float: left;
}
.bsd_horizontal_sharebar .Share_buttons ul {
    margin: 0;
    padding: 0;
}
.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 1px;
    float: left;
    width: 16%;
    max-width: 115px;
    display: inline-block;
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    text-align: center;
    padding: 0;
    height: 25px;
    line-height: inherit;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.bsd_horizontal_sharebar .Share_buttons .bs_fb {
    background: #3a579a;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb:hover {
    background: #314a83;
}
/*--Tweeter---*/
.bsd_horizontal_sharebar .Share_buttons .bs_twtr {
    background: #00abf0;
}
.bsd_horizontal_sharebar .Share_buttons .bs_twtr:hover {
    background: #0092cc;
}
/*--Google Plus---*/
.bsd_horizontal_sharebar .Share_buttons .bs_gplus {
    background: #df4a32;
}
.bsd_horizontal_sharebar .Share_buttons .bs_gplus:hover {
    background: #be3f2b;
}
/*--Pinterest---*/
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
    background: #cd1c1f;
}
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst:hover {
    background: #ae181a;
}
/*--linkedin---*/
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
    background: #2554BF;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin:hover {
    background: #224EB4;
}
/*---Total Share----*/
.bsd_horizontal_sharebar .Share_buttons .share.h6 {
    font-size: 10px;
    font-weight: bold;
    text-shadow: none!important;
    text-decoration: none;
    text-align: center;
    color: #000000;
    border-top: 3px solid #FFF600 !important;
    border-bottom: 0;
    padding: 0px !important;
    padding-top: 5px!important;
    margin: 0 !important;
    line-height: 8px;
    border-radius: 75% 0;
}
.bsd_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible !important;
    width: 95px !important;
}
.bsd_horizontal_sharebar .Share_buttons .share .count.h4 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    color: #FF0000;
    line-height: 15px;
    margin-top: 0px;
    margin: -4px 0px 2px 0;
    min-height: 15px;
    padding: 0px;
    border: none;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs {
    position: relative;
    color: #C3C3C3;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    float: right;
    min-width: 12px;
    font-family: sans-serif;
    padding: 0px 5px;
    background-color: rgba(0,0,0,0.28);
    border-radius: 0px 0px 0px 15px;
}
 @media only screen and (max-width: 979px) {
 .bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
  width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs
 {
 display: none !important;
}
}
 @media only screen and (max-width:768px) {
.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    font-size: 11px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
    min-width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
    width: 30px;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
   margin: 1px 3px;
}
 @media only screen and (max-width:479px) {
 .bsd_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible!important;
    width: 80px!important;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
    width: 25px !important;
    margin: 2px;
    border-radius: 50px;
    border: 2px solid rgba(0, 0, 0, 0.14);
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
    display: none !important;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
    width: 25px !important;
}
}
</style>
</b:if>
4. Now To Add Social Buttons Below Post Titles Find <div class='post-header-line-1'/> "you will find this <div class='post-header-line-1'/> tag twice or thrice but we need to stop on second one" To Add Social Buttons To Post Footer Find <div class='post-footer'> or if you did not find the above line then look for <div class='post-footer-line post-footer-line-1'>and just below paste the following code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://bloggersstand.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-bs").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<div class='bsd_horizontal_sharebar'>
<div class='Share_buttons'>
  <ul>
  <li class='share'>
    <div class='share-bs' data-service='total'>
        <div class='count h4'></div>
        <div class='share h6'>SHARES</div>
  </div>
  </li>
  <li class='bs_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"></i> </div>
  <div class="wrap">Share</div>
  <div class='share-bs' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='bs_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @bloggersstand - &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'></i></div>
  <div class="wrap">Tweet</div>
  <div class='share-bs' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='bs_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'></i></div>
  <div class="wrap">Share</div>
  <div class='share-bs' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='bs_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'></i></div>
  <div class="wrap">Pin</div>
  <div class='share-bs' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='bs_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'></i></div>
  <div class="wrap">Share</div>
  <div class='share-bs' data-service='linkedin'>
        <div class='count'/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>
</b:if>
</b:if>
5.Save your template,Done !
That's it Folks!
We hope this article helped you to learn How To Add Responsive Social Media Sharing Buttons With Share Counts to your Blogger template.If you liked this article please Join us on Facebook,Twitter,Google Plus.
How to Add Responsive Custom Social Media Share Buttons With Counts For Blogger template,fully responsive social media buttons facebook fb twitter with share counter for blogspot template,html pure css code responsive buttons for below post titles in blogger,blogger responsive widget gadget plugin.
In this article today we are going to explain how to add custom social media share buttons with ...
SUMMARY

How to Add Responsive Custom Social Media Share Buttons With Counts For Blogger template,fully responsive social media buttons facebook fb twitter with share counter for blogspot template,html pure css code responsive buttons for below post titles in blogger,blogger responsive widget gadget plugin.

You Might Also Like:

We hope this article helped you to learn Add Responsive Custom Social Share Buttons With Counts For Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Responsive Custom Social Share Buttons With Counts For Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand