Jul 21, 2016

Add WP Like Floating Social Sharing Widget to Blogger Post's V1

data:blog.title
Now days the best way to increase any blog's PVs is, have a good looking Social sharing widget. Because, if we has a good looking sharing widget which can attract readers to share your content then, PVs of your blog can boost day by day. Today we are going to release  WordPress Like Floating Social Sharing Bar for Blogger. It has Total share counts and custom buttons. In previous post we have shared a Cute Popup email Subscription box Widget for Blogger, Have a look also.



Responsive Floating Social Share Bar for BloggerThis widget is totally different from our previous sharing widgets because this time we did not use any official buttons of social sites instead we used own designed custom social buttons along with total share counts. Every button of this widget shows the number of total shares on that particular social media button.

Features of This Widget with Demo Screenshot

Responsive Style Floating Social Sharing Widget for Blogger


We tried our best to give it the look of other leading free and premium sharing widgets on the web. This is fully responsive. It includes a Show-Hide button, by which you can easily hide and show this widget from screen. It's always good to be on the safe side rather than losing visitors. It has following features.
  1. Total Share Count.
  2. Particular button count.
  3. Only show on static page of your blog.
  4. It is fully Responsive.
  5. Includes Buttons of all leading Social Networking Sites.
  6. WordPress like Look.
  7. Totally Free.
  8. No need to say, it has also Pro look. :)

Adding Floating Social Sharing Widget to Blogger


Note:  You don't have permission to copy and share my code on your Blog.
  • Go To Blogger >> Template >> Edit HTML.
  • For Icons, we have use FontAwesome 4.6.3 so just find out opening <head> tag and just after this Paste FontAwesome Stylesheet link which is given below.
Note : Before doing any customization Must Download a Backup Copy of your Blogger Template.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

Note: This is the latest version of FontAwesome Icons CSS link and you need to update it if you are using old version which is before 4.2.0 because, in old version StumbleUpon icon is not included.



  • Now, Add Google JavaScript Library link if it not already added to your blogger template. Add it just after of <head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

  • Now again Search for closing header tag </head> by pressing CTRL+F and paste below just above of this tag.
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Floating Like WordPress Social Sharing Bar Version 1.0
Designed by: Paramjot Singh
Blogger at: http://www.mybloggerguides.com
Counting Code by:: http://donreach.com/social-share-count
Distributed Under GPL License
Icons:: FontAwesome 4.6.3
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.MBG_SocialBar {  position: fixed; bottom:-3px; padding: 0; left:0.3px; background: none; text-align: center; margin: 0 auto; z-index: 99999999;} .MBG_SocialBar label:hover {  cursor: pointer; opacity:1; }
.MBG_SocialBar label { text-align: center; opacity: 0.9; background: #ff0000; color: #FFF; border: 0; font-family: fontawesome; display: block; font-size: 22px; padding: 15px 5px 5px 5px; border-radius: 10px; -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; width: 130px; height:32px; margin-left:160px; margin-top:170px;}
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; margin-top:190px; margin-left:-10px; padding: 5px; width:50px; }
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:-1075px !important; } input.ShowHide_Button { display: none; } 
.MBG_SocialBar .social_menu { display: inline-block; float: left; list-style:none; max-width:100%; width:306px; margin: 0; padding: 0; background:#111; border-top:4px solid #111; border-bottom:2px solid #111; border-left:2px solid #111; border-right:2px solid #111; border-radius:10px;}
.MBG_SocialBar .social_menu .button_facebook { background: #3a579a; }
.MBG_SocialBar .social_menu .button_facebook:hover { background: #314a83; } .MBG_SocialBar .social_menu .button_twitter { background: #00abf0; } .MBG_SocialBar .social_menu .button_twitter:hover { background: #0092cc; } .MBG_SocialBar .social_menu .button_googleplus { background: #df4a32; } .MBG_SocialBar .social_menu .button_googleplus:hover { background: #be3f2b; } .MBG_SocialBar .social_menu .button_pinterest { background: #cd1c1f; } .MBG_SocialBar .social_menu .button_pinterest:hover { background: #ae181a; } .MBG_SocialBar .social_menu .button_stumbleupon { background: #ea4b24; } .MBG_SocialBar .social_menu .button_stumbleupon:hover { background: #c7401f; } .MBG_SocialBar .social_menu .button_linkedin { background: #2554BF; } .MBG_SocialBar .social_menu .button_linkedin:hover { background: #224EB4; }
.MBG_SocialBar .social_menu .button_facebook, .MBG_SocialBar .social_menu .button_twitter, .MBG_SocialBar .social_menu .button_googleplus, .MBG_SocialBar .social_menu .button_pinterest, .MBG_SocialBar .social_menu .button_stumbleupon , .MBG_SocialBar .social_menu .button_linkedin{border-radius:10px;}
.MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_stumbleupon .count, .MBG_SocialBar .social_menu .button_linkedin .count {
  color: #8ff!important; font-size: 14px !important; font-family: sans-serif; font-weight: normal; }
.MBG_SocialBar .social_menu > ul { margin: 0; padding: 0; list-style: none; }
.MBG_SocialBar .social_menu .share { background: #111; color: #8ff; font-size: 12px; height: 50px !important; max-width:150px; margin-bottom:1px; border-radius:10px; }
.MBG_SocialBar .social_menu .share .count.h4 { background:#111; font-size: 18px; font-family: "Oswald",sans-serif; color: #8ff; height: 25px !important; border-radius:10px; line-height: 1.5em; font-weight: normal; }
.MBG_SocialBar .social_menu .share .h6 { font-family: sans-serif;}
.MBG_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-left: 0 solid rgba( 0,0,0,.4); height: 50px; width:150px; overflow: hidden; display: inline-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; }
.MBG_SocialBar .social_menu > ul > li a { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none; }
.MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 140px; }
.MBG_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; }
.MBG_SocialBar .social_menu > ul > li:hover i { opacity: 0.9; }
@media only screen and (min-width:768px) and (max-width:979px) {
 .MBG_SocialBar { width:227.5px; }
.MBG_SocialBar .social_menu .share{max-width:90px;}
.MBG_SocialBar .social_menu > ul > li {max-width:100%; width:110px;}
  .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 100px; }
.MBG_SocialBar label {width: 95px; background: #ff0000; color: #FFF; font-size: 22px; padding: 15px 5px 5px 5px; height:35px; margin-left:52%; z-index:999999;}
}
@media only screen and (min-width:480px) and (max-width:767px) {
 .MBG_SocialBar { width:253px; }
.MBG_SocialBar .social_menu .share{max-width:60px;}
.MBG_SocialBar .social_menu > ul > li {max-width:100%; width:60px;}
  .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 55px; }
.MBG_SocialBar label {width: 48px; background: #ff0000; color: #FFF; font-size: 22px; padding: 15px 5px 5px 5px; height:34px; margin-left:77%; z-index:999999; margin-top:58px;}
input.ShowHide_Button:checked + label { margin-top:75px; margin-left:-10px;}
}
@media only screen and (min-width:320px) and (max-width:479px){
.MBG_SocialBar { bottom: % !important; width:110px; }
.MBG_SocialBar .social_menu .share{max-width:51px;}
.MBG_SocialBar .social_menu > ul > li {max-width:100%; width:52px;}
  .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 45px; }
.MBG_SocialBar label {width: 40px; background: #ff0000; color: #FFF; font-size: 20px; padding: 15px 5px 5px 5px; height:35px; margin-left:54%; z-index:999999; margin-top:170.5px;}
input.ShowHide_Button:checked + label { margin-top:75px; margin-left:-12px;}
}
</style>
</b:if>

  •  Now, You need to add HTML Part and JavaScript API. Find out this code line <div class='post-footer-line post-footer-line-3'> and just below of this line paste below HTML Part given below as it is.
Note:  You will find the above code lines two times in your template, but you have to paste the below code just after the second appearance of this code line.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='MBG_SocialBar'>
  <input class='ShowHide_Button' id='roTater' type='checkbox'/>
  <label for='roTater'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<ul>
<li>
<div class='share'>
    <div class='share-btn' data-service='total'>
      <div class='count h4'></div>
        <div class='h6'>SHARE</div>
  </div></div></li>
<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 @MYBLOGGERGUIDES - &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 () {
    // Get current URL from canonical tag
    var shareUrl = $("link[rel=canonical]").attr("href");

    // Ajax request to read share counts. Notice "&callback=?" is appended to the URL to define it as JSONP.
    $.getJSON('https://count.donreach.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        shares.total = data.total;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];

            // Divide large numbers eg. 5500 becomes 5.5k
            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>

Required Change:

  1. One thing you need to change in above HTML code is our twitter username @MYBLOGGERGUIDESwith your twitter username
  2. If you want to remove a button then just remove<li> </li> section of that button.
  • Now save your template. Open any post of your Blog to see it live.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

 Conclusion:

So above guide is about How To Add WordPress Like Floating Social Sharing Widget to Blogger? Hope you like it. The only one thing we want from you is, Please Do share it on social networking sites. If you found any bug after following all above steps then drop a comment below or contact me.

Any improvement suggestion? Your opinion are always welcome. Stay tuned & Blessed! Thank You!

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.