Your blog is incomplete if you've not added any social media share buttons. Social media share buttons is a must have gadget for blog. It lets your visitors to share any of their favorite post instantly.
Though blogger also gives you an option to add share buttons to posts but I think they look too old fashioned. So here I'm posting a tutorial on how to add floating social media buttons beneath every post on blogger.
To add a simple social media share buttons, see this article instead:-
Add simple social media share buttons
To add a simple social media share buttons, see this article instead:-
Add simple social media share buttons
This widget will add social media buttons beneath every post title which will stay on top whenever a visitor scroll down to the end of post.
Steps to follow
- Open blogger
- Go to 'Template' and then 'Edit HTML'
- Search for this code
]]></b:skin>
- Paste this code right before bskin
#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 25px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}
.floating-social-buttons .facebook {
background-color:#003471;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .twitter {
background-color: #00BFF3;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .googleplus {
background-color: #EA4D29;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .pinterest {
background-color:#C6393D;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
- Now, search for this code
</head>
- Paste this code right before head
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
offset = $movesbuttons.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
} else {
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>
- Now, search for this code
<div class='post-header'>
- Paste this code right after post header
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='floating-social-buttons'>
<ul class='floating-social-buttons'>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span> Facebook</span></a></li>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span> Twitter</span></a></li>
<li><a class='googleplus' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span> Google+</span></a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/><span> Pinterest</span></a></li>
</ul>
</div>
</div>
</b:if>
- Save template and visit blog to see live changes.
Customize widget
If you want the buttons at the end of the posts. Paste last code after this code
<div class='post-footer'>
If you want to change size of buttons change the value in blue. Change in all four as there are four buttons.
font: normal 700 12px/1 "Calibri", sans-serif;
If you want to change background color of buttons on mouse hover. Add this code along with first code we added in bskin
.floating-social-buttons .facebook:hover {
background-color: #fff;
color: #003471;
}
.floating-social-buttons .twitter:hover {
background-color: #fff;
color: #00BFF3;
}
.floating-social-buttons .googleplus:hover {
background-color: #fff;
color: #EA4D29;
}
.floating-social-buttons .pinterest:hover {
background-color: #fff;
color: #C6393D;
}
|
You can play with background-color and color to have better results according to you. |
|---|
If widget is merging with post then change the value in blue
<div style='padding:5px 0 35px 0;clear:both;'>
0 comments:
Don't forget to check 'Notify me' box to get notification of reply.