Aug 17, 2016

Add Floating Jumbo Social Sharing Counter Widget to Blogger Post's

data:blog.title
Jumbo Social sharing widget, floating social share bar for blogger, blogger social sharing counter widget
Hey guys, How are you? Today we are going to share "FLOATING SOCIAL SHARING WIDGET WITH JUMBO COUNTER". Jumbo social sharing widget is just like WordPress websites and it is fully responsive, Means your readers also can share your blogger blog content with this jumbo share counter widget. Before preaching the features of this widget we are going to attach a live demo screenshot of this widget. Have a look on below picture and see how it works. :)


We hope you have liked above demo screenshot of this widget and we're damn sure you could not ignore this widget due to its attractive look. Actually this is second version of our previous WP like social sharing counter widget. Social sharing counter widget V1 has not features like this (V2). We have included many features to this widget, For example: Jumbo Effect, More Pleasant Look, Share This Article Heading and much more. If you want to add this widget on your blogger blog then you should know about features of jumbo share counter before add it to your blog.

Also Read: BlackReen Responsive Blogger Template - By MyBloggerGuides

Features of Jumbo Social Sharing Counter Widget

  1. Responsive Design.
  2. Designed with CSS, HTML and .js language.
  3. Animated Jumbo Share Counter.
  4. Fast Loading.
  5. Floating Social Share Bar.
  6. Show Hide Button.
  7. Fixed on Little Space in Left Sidebar.
  8. Integrated FontAwesome Icons.
Okay! Now, if you want to add this social sharing widget to your blogger blog then follow all instruction step by step which are given below.

How To Add Jumbo Social Sharing Counter Widget to Blogger?

Note1: Before doing any customization inside your blogger template code must download a backup copy of your blogger template.
STEP1] Go To Blogger Dashboard >> Template >> Edit HTML.
STEP2] Using CTRL+F Search for <head> tag and just after it paste below stylesheet link of FontAwesome Icons and Lobster Fonts. 

Note2: If you are using Version 1 of this social sharing widget then skip this step and headover to the next.
     <link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/><link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
Note3: Above FontAwesome Stylesheet is the latest version. If you are using old version which is before 4.2.0 then you have to replace with this stylesheet link because in old versions have not included StumbleUpon Icons.

STEP3] Now again using CTRL+F search for ]]></b:skin> tag and just above of it paste below CSS Code.

Note4: You don't have permission to share my widget codes on your blog with in any condition. Respect the hard work of developers.
/*------------------------------------------------------------
Floating WordPress Like Jumbo Social Share Bar Version 2.0
Designed by: Paramjot Singh
Blogger at: http://www.mybloggerguides.com
Counting Code by:: http://donreach.com/social-share-count
Jumbo Effect By : STC Network
Distributed Under GPL License
Icons:: FontAwesome 4.6.3
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.MBG_SocialBar{max-width:410px; width:100%; height:auto; max-height:138px; position: fixed; bottom:5px; padding: 0; left:0px; 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: #393939; color: #FFF; border: 0; font-family: fontawesome; display: block; font-size: 22px; padding: 15px 5px 5px 5px; -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: 70px; height:30px; margin-left:249px; margin-top:85px;}
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:107px; margin-left:-7px; 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:-500px !important; } input.ShowHide_Button { display: none; } 
.MBG_SocialBar .social_menu:before{padding:5px 180px 3.2px 0.1px; top:-0.5px; color:#fff; z-index:99999; background:#393939; position:relative!important; content:'Share This Article \f1e0'; font-family:Lobster,FontAwesome;}
.MBG_SocialBar .social_menu { border:3px solid #cecece; background-color:#f0f0f0; height:132px; display: inline-block; float: left; list-style:none; max-width:325px; width:410px; margin: 0; padding: 0; }
.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:1px;}
.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 .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count  { padding: 5px 5px 5px 5px; background-color:#111; font-weight:normal; color: #8ff!important; font-size: 16px !important; float:right; margin-top:-7px; margin-right:-1px; border-bottom-left-radius:15px; border-top-left-radius:20px;}
.MBG_SocialBar .social_menu > ul { margin: 5px 0px 0px 0px;; padding: 0; list-style: none; }
.MBG_SocialBar .social_menu .share { background: #111; color: #8ff; font-size: 12px; height: 50px !important; max-width:80px; margin-bottom:1px; border-radius:1px; }
.MBG_SocialBar .social_menu .share .count.h4 { background:#111; font-size: 18px; font-family: "Oswald",sans-serif; color: #8ff; height: 25px !important; line-height: 1.5em; font-weight: normal; }
.MBG_SocialBar .social_menu .share .h6 { font-family: sans-serif;}
.MBG_SocialBar .social_menu > ul > li { margin: -5px -2px 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:80px; 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: 75px; }
.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; top:13px; position:relative; }
.MBG_SocialBar .social_menu > ul > li:hover i { opacity: 0.9; }
@media only screen and (min-width:768px) and (max-width:979px) {
.MBG_SocialBar{bottom:0px; left:-1px;}
input.ShowHide_Button:checked + label {margin-top:105px; margin-left:-15px;}
input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
}
@media only screen and (min-width:480px) and (max-width:767px) {
.MBG_SocialBar{bottom:63.5px; left:-0.5px;}
.MBG_SocialBar .social_menu{max-width:180px; width:100%; height:195px;}
input.ShowHide_Button:checked + label {margin-top:170px; margin-left:-15px;}
input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
.MBG_SocialBar .social_menu:before{padding:3px 30px 3px 0.1px; z-index:1;}
.MBG_SocialBar .social_menu .share {max-width:90px;}
.MBG_SocialBar .social_menu > ul > li {height: 40px; max-width:89px; width:100%; }
.MBG_SocialBar .social_menu > ul > li:hover {max-width: 84px; width:100%; height: 40px; position:relative!important;}
.MBG_SocialBar label {line-height:10px; width: 79px; margin-left:93px; margin-top:158px; height:20px;}
.MBG_SocialBar .social_menu .share {line-height:10px; height: 40px!important; max-width:90px; margin-top:0.3px; }
.MBG_SocialBar .social_menu .share .count.h4 { font-size: 16px;}
.MBG_SocialBar .social_menu .share .h6 {font-family: sans-serif;}
.MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count { margin-top:-16px;}
.MBG_SocialBar .social_menu > ul > li i { position:relative; top:6px; }
.MBG_SocialBar .social_menu .button_facebook {position:relative; top:1px;}
.MBG_SocialBar .social_menu .button_linkedin {position:relative; top:-0.2px;}
}
@media only screen and (min-width:320px) and (max-width:479px){
.MBG_SocialBar{bottom:63.5px; left:-0.5px; max-width:140px;}
.MBG_SocialBar .social_menu{max-width:140px; width:100%; height:195px;}
input.ShowHide_Button:checked + label {margin-top:170px; margin-left:-15px;}
input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
.MBG_SocialBar .social_menu:before{padding:3px 7px 3.2px 0.1px;font-size:16px; }
.MBG_SocialBar .social_menu > ul > li {height: 40px; max-width:69.2px; width:100%; }
.MBG_SocialBar .social_menu > ul > li:hover {max-width: 64.2px; width:100%; height:40px; position:relative; }
.MBG_SocialBar label {width: 59px; margin-left:73px; margin-top:158px; height:20px;}
.MBG_SocialBar label i{top:-5px; position:relative;}
.MBG_SocialBar .social_menu .share {line-height:10px;}
.MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count { margin-top:-16px;}
.MBG_SocialBar .social_menu > ul > li i { position:relative; top:8px; }
}
STEP4]  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.


Note5:  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 tcount' data-service='total'>
      <div class='count h4 anim'/>
        <div class='h6'>SHARES</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 anim'/></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 anim'/></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 anim'/></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 anim'/></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 anim'/></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 anim'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[

ADD CODE HERE

$(document).ready(function() {
var shareUrl=$("link[rel=canonical]").attr("href");
$.getJSON('http://share-counters.rhcloud.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];$(el).text(count)});
}); /*#########Animation Settings###########*/
$(window).load(function() {
    $('.anim').counterUp({
      delay:1, //Smaller value gives more frames
      time: 60 //Higher value slows down animation
    }); });
});
//]]></script>
</b:if>
</b:if>
<script>
$(&quot;.MBG_SocialBar&quot;).hide();
$(window).scroll(function() {
    if ($(window).scrollTop() &gt; 50) {
        $(&quot;.MBG_SocialBar&quot;).fadeIn(&quot;slow&quot;);
    }
    else {
        $(&quot;.MBG_SocialBar&quot;).fadeOut(&quot;slow&quot;);
    }
  });</script>

STEP5] Now Click on below button and Paste whole code (Using CTRL+A & after that CTRL+C) by replacing ADD CODE HERE in above code to make animated effect in social sharing widget.

Get Code


STEP6] Replace @MyBloggerGuides from above code area with your Twitter UserId.

STEP7] Now Click on Save Template. That's it. Now checkout your blog to see it is working properly or not?

Also Read: Customized Blogger Official Contact Form! Never Seen Before

Conclusion:

So above guide is about "How To Add Floating Jumbo Social Sharing Counter Widget to Blogger Blog?" We hope you will like this sharing widget. Do comment below if you have any advise to imporove this widget. Your opinion are always welcome. Do comment below if problem persist. Do Share.
Thank You! Stay Blessed!

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.