Tuesday, 24 November 2015

How to Add Floating Social Media Buttons in Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social network


How to Add Floating Social Media Buttons in Blogger

  • First of all Login to your Blogger Profile and select your blog.
  • Now go to Dashboard > Template > Edit HTML.
  • Click anywhere inside the code area, then press the CTRL + F keys and search for this code
  • Now Find <head> This tag and Just after Paste this code
  • <link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
  • Now find </head>  Then jus before Paste this code
  • <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*------------------------------------------------------------
    Floating Social Share Button Bar Version 2.0
    Designed by:: http://www.
    Alltechpeople.com
    Shares Count Code by:: http://donreach.com/social-share-count
    issued under GNU GPL Licence
    Icons:: FontAwesome 4.2.0
    **************** Do Not Remove These Credits *****************
    ------------------------------------------------------------*/
    .allthechpeople_SocialBar {
      position: fixed;
      bottom: 30%;
      padding: 0;
      left:0;
      background: none;
      text-align: center;
      margin: 0 auto;
      z-index: 99999999;
    }
    .allthechpeople_SocialBar label:hover {
      cursor: pointer;
      opacity:1;
    }
    .allthechpeople_SocialBar label {
      text-align: center;
      opacity: 0.4;
      width: 50px;
      background: #3A3939;
      color: #FFF;
      border: 0;
      font-family: FontAwesome;
      display: block;
      font-size: 12px;
      padding: 0px 0px;
      border-radius: 0;
      -webkit-transition: all .4s ease-in-out;
      -moz-transition: all .4s ease-in-out;
      -ms-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
      position: absolute;
      line-height: 1.5em;
      margin-top: 346px;
    }
    input.ShowHide_Button:checked + label {
      transform-origin: 50% 0%!important;
      -webkit-transform-origin: 50% 0%!important;
      -moz-transform-origin: 50% 0%!important;
      -ms-transform-origin: 50% 0%!important;
      -o-transform-origin: 50% 0%!important;
      opacity: 1;
      -webkit-transform: translateX(0px) rotateY(-180deg);
      -moz-transform: translateX(0px) rotateY(-180deg);
      -ms-transform: translateX(0px) rotateY(-180deg);
      -o-transform: translateX(0px) rotateY(-180deg);
      transform: translateX(0px) rotateY(-180deg);
      -webkit-transition-delay: 0.2s;
      -moz-transition-delay: 0.2s;
      -ms-transition-delay: 0.2s;
      -o-transition-delay: 0.2s;
      transition-delay: 0.2s;
      border: 1px solid #3A3939;
      border-radius: 50px 0px 0px 50px;
      width: 30px;
      max-width: 30px;
    }
    input.ShowHide_Button ~ .ShowHideMe {
      -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
      -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
      -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
      -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
      transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
    }
    input.ShowHide_Button:checked ~ .ShowHideMe {
      margin-left: -75px !important;
    }
    input.ShowHide_Button {
      display: none;
    }
    .allthechpeople_SocialBar .social_menu {
      display: inline-block;
      float: left;
      list-style:none;
      max-width:50px;
      margin: 0;
      padding: 0;
    }
    .allthechpeople_SocialBar .social_menu .button_facebook {
      background: #3a579a;
    }
    .allthechpeople_SocialBar .social_menu .button_facebook:hover {
      background: #314a83;
    }
    .allthechpeople_SocialBar .social_menu .button_twitter {
      background: #00abf0;
    }
    .allthechpeople_SocialBar .social_menu .button_twitter:hover {
      background: #0092cc;
    }
    .allthechpeople_SocialBar .social_menu .button_googleplus {
      background: #df4a32;
    }
    .allthechpeople_SocialBar .social_menu .button_googleplus:hover {
      background: #be3f2b;
    }
    .allthechpeople_SocialBar .social_menu .button_pinterest {
      background: #cd1c1f;
    }
    .allthechpeople_SocialBar .social_menu .button_pinterest:hover {
      background: #ae181a;
    }
    .allthechpeople_SocialBar .social_menu .button_stumbleupon {
      background: #ea4b24;
    }
    .allthechpeople_SocialBar .social_menu .button_stumbleupon:hover {
      background: #c7401f;
    }
    .allthechpeople_SocialBar .social_menu .button_linkedin {
      background: #2554BF;
    }
    .allthechpeople_SocialBar .social_menu .button_linkedin:hover {
      background: #224EB4;
    }
    .allthechpeople_SocialBar .social_menu .button_facebook .count,
    .allthechpeople_SocialBar .social_menu .button_twitter .count,
    .allthechpeople_SocialBar .social_menu .button_googleplus .count,
    .allthechpeople_SocialBar .social_menu .button_pinterest .count,
    .allthechpeople_SocialBar .social_menu .button_stumbleupon .count,
    .allthechpeople_SocialBar .social_menu .button_linkedin .count {
      color: #fff!important;
      padding-top: 4px;
      font-size: 13px !important;
      line-height: 1.2em;
      font-family: sans-serif;
      font-weight: bold;
    }
    .allthechpeople_SocialBar .social_menu > ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .allthechpeople_SocialBar .social_menu .share {
      background: #FFF;
      color: #807F7F;
      font-size: 11px;
      height: 45px !important;
    }
    .allthechpeople_SocialBar .social_menu .share .count.h4 {
      font-size: 18px;
      font-family: sans-serif;
      color: #424242;
      height: 25px !important;
      line-height: 1.5em;
      font-weight: bold;
      margin: 0px !important;
    }
    .allthechpeople_SocialBar .social_menu .share .h6 {
      padding-bottom: 3px;
      font-family: sans-serif;
      margin: 0px !important;
      line-height: 1.5em;
      font-size: 11px;
    }
    .allthechpeople_SocialBar .social_menu > ul > li {
      margin: 0px 0px 0px 0px;
      position: relative;
      text-align: center;
      list-style: none;
      list-style-type: none;
      padding: 0px;
      border: 0px;
      border-left: 0 solid rgba( 0,0,0,.4);
      height: 50px;
      width: 50px;
      overflow: hidden;
      display: block;
      box-sizing: border-box;
      background: none;
      box-sizing: content-box;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .
    allthechpeople_SocialBar .social_menu > ul > li a {
      display: block;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 5px 0px;
      cursor: pointer;
      text-decoration: none;
    }
    .allthechpeople_SocialBar .social_menu > ul > li:hover {
      border-left: 5px solid rgba( 0,0,0,.3);
      width: 40px;
    }
    .allthechpeople_SocialBar .social_menu > ul > li i {
      color: #fff !important;
      font-family: FontAwesome;
      font-size: 20px;
      font-style: normal;
      font-weight: normal;
      line-height: 1em;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .allthechpeople_SocialBar .social_menu > ul > li:hover i {
      opacity: 0.9;
    }
    @media only screen and (min-width:768px) and (max-width:979px) {
    .allthechpeople_SocialBar {
      bottom: 20% !important;
    }
    }
    @media only screen and (min-width:480px) and (max-width:767px) {
    .allthechpeople_SocialBar {
      bottom: 15% !important;
    }
    }
     @media only screen and (max-width:479px) {
    .allthechpeople_SocialBar {
      bottom: 10% !important;
      display: none !important; /*---delete this code line to make it appear on mobile--*/
    }
    }
    </style>
    </b:if>
  • Now find <div class='post-footer-line post-footer-line-3'> And just Blow Past Whole Code
  • <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='alltechpeopler_SocialBar'>
      <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
      <label for='twiSter'><i class='fa fa-arrow-left'/></label>
      <div class='ShowHideMe'>
      <div class='social_menu'>
    <div class='share'>
        <div class='share-btn' data-service='total'>
            <div class='count h4'/>
            <div class='h6'>SHARES</div>
      </div></div>
    <ul>
    <li class='button_facebook'>
    <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'><strong><i class='fa fa-facebook'/>
    <div class='share-btn' data-service='facebook'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_twitter'>
    <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @
    Alltechpeople - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
    <div class='share-btn' data-service='twitter'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_googleplus'>
    <a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.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'><strong><i class='fa fa-google-plus'/>
    <div class='share-btn' data-service='google'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_pinterest'>
    <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'><strong><i class='fa fa-pinterest'/>
    <div class='share-btn' data-service='pinterest'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_stumbleupon'>
    <a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&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'><strong><i class='fa fa-stumbleupon-circle'/>
    <div class='share-btn' data-service='stumbleupon'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_linkedin'>
    <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'><strong><i class='fa fa-linkedin'/>
    <div class='share-btn' data-service='linkedin'>
            <div class='count'/></div></strong>
    </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function () {
      var shareUrl = $("link[rel=canonical]").attr("href");
        $.getJSON('http://sharecount.allthechpeople.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>
    </b:if>
    </b:if>
Note :- Just  my Twitter Username Alltechpeople with your twitter username.
  • Save your template
  • That's was it

Rishi yadav is the founder of MyTechTalk.A Popular tech blog dediceted for Geeks and blogger You Can Follow Me on Facebook Or You Can Connent With Me On Twitter @alltechpeople Email:mytechtalk99@gmail.com

1 comments:

Why you are posting copyrighted content without the permission of original author.
Don't make these stupid things and respect the hard work of designers.
This widget is by twistblogger.com designer satbir patial.


EmoticonEmoticon