MBT: Floating Social Media Share Bar For Blogger

Floating social meda share bar for blogger

As you already know that social sharing is the most important thing for our blogs. Social Sharing help us into drive more traffic from Social Network Websites, allowing readers for share your post and get much more traffic from Social Network Websites.

Social share buttons play vital role in your blog's traffic.

Many bloggers have already posted floating social share buttons widget but it is different updated version which looks alike sumome floating bar.

Previous version: How To Add Floating Sharing Bar In Blogger

Without wasting any more time let's get to work.

DEMO: see on left side of my blog.

Adding Floating social share bar

Go to Blogger > Template > Edit Html
Press ctrl+f inside Editor and Find <head>
paste the following code under <head>

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

Once again add (Javascript) following code just after <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note: If you have already added javascript above code then don't add it.

Now search for </head> and just before it paste the following code.

/*---- social share bar by Mybloggertutorials.blogspot.com -----*/<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.mbt_SocialBar {
position: fixed;
bottom: 30%;
padding: 0;
left:0;
background: none;
text-align: center;
margin: 0 auto;
z-index: 99999999;
}
.mbt_SocialBar label:hover {
cursor: pointer;
opacity:1;
}
.mbt_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;
}
.mbt_SocialBar .social_menu {
display: inline-block;
float: left;
list-style:none;
max-width:50px;
margin: 0;
padding: 0;
}
.mbt_SocialBar .social_menu .button_facebook {
background: #3a579a;
}
.mbt_SocialBar .social_menu .button_facebook:hover {
background: #314a83;
}
.mbt_SocialBar .social_menu .button_twitter {
background: #00abf0;
}
.mbt_SocialBar .social_menu .button_twitter:hover {
background: #0092cc;
}
.mbt_SocialBar .social_menu .button_googleplus {
background: #df4a32;
}
.mbt_SocialBar .social_menu .button_googleplus:hover {
background: #be3f2b;
}
.mbt_SocialBar .social_menu .button_pinterest {
background: #cd1c1f;
}
.mbt_SocialBar .social_menu .button_pinterest:hover {
background: #ae181a;
}
.mbt_SocialBar .social_menu .button_stumbleupon {
background: #ea4b24;
}
.mbt_SocialBar .social_menu .button_stumbleupon:hover {
background: #c7401f;
}
.mbt_SocialBar .social_menu .button_linkedin {
background: #2554BF;
}
.mbt_SocialBar .social_menu .button_linkedin:hover {
background: #224EB4;
}
.mbt_SocialBar .social_menu .button_facebook .count,
.mbt_SocialBar .social_menu .button_twitter .count,
.mbt_SocialBar .social_menu .button_googleplus .count,
.mbt_SocialBar .social_menu .button_pinterest .count,
.mbt_SocialBar .social_menu .button_stumbleupon .count,
.mbt_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;
}
.mbt_SocialBar .social_menu > ul {
margin: 0;
padding: 0;
list-style: none;
}
.mbt_SocialBar .social_menu .share {
background: #FFF;
color: #807F7F;
font-size: 11px;
height: 45px !important;
}
.mbt_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;
}
.mbt_SocialBar .social_menu .share .h6 {
padding-bottom: 3px;
font-family: sans-serif;
margin: 0px !important;
line-height: 1.5em;
font-size: 11px;
}
.mbt_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;
}
.mbt_SocialBar .social_menu > ul > li a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
}
.mbt_SocialBar .social_menu > ul > li:hover {
border-left: 5px solid rgba( 0,0,0,.3);
width: 40px;
}
.mbt_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;
}
.mbt_SocialBar .social_menu > ul > li:hover i {
opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.mbt_SocialBar {
bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.mbt_SocialBar {
bottom: 15% !important;
}
}
@media only screen and (max-width:479px) {
.mbt_SocialBar {
bottom: 10% !important;
display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
</style>
</b:if>

Now Search for <div class='post-footer-line post-footer-line-3'>

and just after if paste the following code

/*---- social share bar by Mybloggertutorials.blogspot.com -----*/
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='mbt_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='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @Learnblogger- "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); 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='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); 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='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); 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='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); 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('https://count.donreach.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>

Remove Learnblogger with your twitter username and you are done. don't forget to subscribe to our newsletter for more interesting widgets.

Also Check: How To Add Horizontal Social Sharing Buttons in Blogger

Note: let me know if it doesn't work on your blog or site in comments below, I would be gald to help you out.

About Author

Hi! I am Sajad Metlo, SEO expert and web developer. The purpose of creating this blog is to provide highly professional tips, top quality Tutorials, Practical SEO tips and methods to earn online.

Floating Social Media Share Bar For Blogger

4/ 5

Admin

Admin 7/24/2018 comments

Tuesday 24 July 2018

Floating Social Media Share Bar For Blogger

Adding Floating social share bar

Also Check: How To Add Horizontal Social Sharing Buttons in Blogger

About Author

Popular Posts

Recent Posts

Select Topic

Tuesday 24 July 2018

Floating Social Media Share Bar For Blogger

Adding Floating social share bar

Also Check: How To Add Horizontal Social Sharing Buttons in Blogger

About Author

Subscribe via email

Popular Posts

Recent Posts

Select Topic