Oct 11, 2015

Below Post Responsive Social Sharing Buttons For Blogger

data:blog.title
Are you searching for below post responsive social sharing widget or buttons for your blogger blog for getting traffic from social media. Social media sites play a major role in overall success of our content because SEO takes time to drive targeted traffic from search engines. Don't worry I'm not going write essay here on social media strategy. Now I'm going to share Custom Horizontal Below Post Responsive Social Sharing Buttons For Your Blogger Blog.

Below Post Responsive Social Sharing Widget For Blogger
Below Post Social Sharing Widget
We have shared a lot of Blogger widgets with you you can find here. These social media buttons are made purely with the help of HTML and CSS Coding, So they don't effect on page loading timing. Below i'm going to share some features of this social sharing widget with all of you.

Other Social Sharing Widgets
  1. Social Sharing Widget with Counter for Blogger
  2. How To Add CSS Social Sharing Widget to Blogger?
  3. Below Post Title or Post Footer Social Sharing Widget
  4. Responsive Blogger Social Sharing Buttons with Counter

Features Of Responsive Social Sharing Widget:

  1. This is Fully Responsive.
  2. Shares counter inbuilt.
  3. Use Font Awesome Icons.
  4. 5 Social media sharing buttons are included.
  5. Made with pure HTML and CSS.
  6. Easy to install.

How To Add Responsive Social Sharing Buttons To Blogger

  • Go To Blogger Dashboard.
  • Template >> Edit HTML.
  • Press CTRL+F and find <head> Tag and just below of it paste below code.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  • Now Find </head> tag by pressing CTRL+F and just above of this paste below code.
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
        /*------------------------------------------------------------
        Horizontal Social Media Share Buttons for Blogger
        Designed by:: http://www.mybloggerguides.com
        Shares Count Code by:: http://donreach.com/social-share-count
        issued under GNU GPL Licence
        Icons:: FontAwesome
        ******** Do Not Remove These Credits ********
        ------------------------------------------------------------*/
        .mbg_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);
        }
        .mbg_horizontal_sharebar .Share_buttons {
         display: block;
        }
        .mbg_horizontal_sharebar .Share_buttons .wrap {
            text-align: center;
            margin: 0 auto;
            display: inline-block;
            min-width: 41px;
        }
        .mbg_horizontal_sharebar .Share_buttons .wrap1 {
            display: inline-block;
            width: 31px;
            float: left;
        }
        .mbg_horizontal_sharebar .Share_buttons ul {
            margin: 0;
            padding: 0;
        }
        .mbg_horizontal_sharebar .Share_buttons ul li a, .mbg_horizontal_sharebar .Share_buttons ul li a:hover {
            color: #FFF !important;
            cursor: pointer;
            line-height: 25px;
            height: 100%;
            display: block;
            text-decoration: none;
        }
        .mbg_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;
        }
        .mbg_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---*/
        .mbg_horizontal_sharebar .Share_buttons .btn_fb {
            background: #3a579a;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_fb:hover {
            background: #314a83;
        }
        /*--Twitter---*/
        .mbg_horizontal_sharebar .Share_buttons .btn_twtr {
            background: #00abf0;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_twtr:hover {
            background: #0092cc;
        }
        /*--Google Plus---*/
        .mbg_horizontal_sharebar .Share_buttons .btn_gplus {
            background: #df4a32;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_gplus:hover {
            background: #be3f2b;
        }
        /*--Pinterest---*/
        .mbg_horizontal_sharebar .Share_buttons .btn_pntrst {
            background: #cd1c1f;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_pntrst:hover {
            background: #ae181a;
        }
        /*--linkedin---*/
        .mbg_horizontal_sharebar .Share_buttons .btn_linkdin {
            background: #2554BF;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_linkdin:hover {
            background: #224EB4;
        }
        /*---Total Share----*/
        .mbg_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;
        }
        .mbg_horizontal_sharebar .Share_buttons .share {
            border: none;
            margin: 0px 5px 0px 1px;
            overflow: visible !important;
            width: 95px !important;
        }
        .mbg_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;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
            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) {
         .mbg_horizontal_sharebar .Share_buttons .btn_linkdin {
          width: 34px;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
        .mbg_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn
         {
         display: none !important;
        }
        }
         @media only screen and (max-width:768px) {
        .mbg_horizontal_sharebar .Share_buttons ul li a, .mbg_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;
        }
        .mbg_horizontal_sharebar .Share_buttons .wrap {
            min-width: 34px;
        }
        .mbg_horizontal_sharebar .Share_buttons .btn_linkdin,
        .mbg_horizontal_sharebar .Share_buttons .btn_pntrst {
            width: 30px;
        }
        .mbg_horizontal_sharebar .Share_buttons ul li {
           margin: 1px 3px;
        }
         @media only screen and (max-width:479px) {
         .mbg_horizontal_sharebar .Share_buttons .share {
            border: none;
            margin: 0px 5px 0px 1px;
            overflow: visible!important;
            width: 80px!important;
        }
        .mbg_horizontal_sharebar .Share_buttons ul li {
            width: 25px !important;
            margin: 2px;
            border-radius: 50px;
            border: 2px solid rgba(0, 0, 0, 0.14);
        }
        .mbg_horizontal_sharebar .Share_buttons .wrap {
            display: none !important;
        }
        .mbg_horizontal_sharebar .Share_buttons ul li .fa {
            width: 25px !important;
        }
        }
        </style>
        </b:if>
  • Now search for <data:post.body/> tag by pressing CTRL+F and paste below code just below of this tag. 
 <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://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
                shares = data.shares;
                $(".count").each(function (index, el) {
                    service = $(el).parents(".share-btn").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='mbg_horizontal_sharebar'>
        <div class='Share_buttons'>
          <ul>
          <li class='share'>
            <div class='share-btn' data-service='total'>
                <div class='count h4'/>
                <div class='share h6'>SHARE ME</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 @TechFrnz - &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>
        </b:if>
  • You can find <data:post.body/> tag 2 to 3 times try one by one in all and find which is suite to your blogger template.
  • Now Change @TechFrnz into your twitter id.
  • Now Save template.
  • That's it. You have successfully added below post responsive social sharing widget to your blogger blog.

Conclusion:

So above guide is about How To Add Below Post Responsive Social Sharing Buttons To Blogger Blog. Hope this guide help you to install this widget into your blogger blog. If it did not appear on your blog even after following all steps correctly then please let us know. We'll personally help you out for sure. Also give feedback for design and responsiveness by dropping a comment below. Don't forget to share on Blogging Communities and with Blogger Friends.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.