Blogging becomes interesting when people share your content on different
social media sites and other websites with friends. In order to share
your content on social media sites by visitors; you need to add some
beautiful and smashing social sharing widgets. If your widget is looking
attractive and catches people’s attention then your content might get
shared by visitors. For this purpose, there has been a huge number of
Blogger widgets and plugins by different designers. Today, I would like
to share a floating social sharing widget with you
which scrolls down automatically when visitors scroll down the page. You
can see this widget on my blog. The same widget I’m sharing with you.
The Benefits of This Widget
There are many advantages you can get by using this widget on your blog.
The first benefit is that you can have all social sharing buttons in a
single widget and also one can send your content to someone via email by
using this widget. The second benefit is that this widget don’t have
loadable JavaScript or jQuery codes so it can easily be loaded by
browser and also it scrolls down automatically and user can observe
sharing your content somewhere, while visiting your blog.
How to Add Social Media Floating Widget to Blogger?
So you have to do these steps to install it on your blogger blog
1. Go to blogger dashboard > Template
2. Now click on > Edit HTML
3. Jump to Blog1
4. Search for below code by using CTRL+F Short Key
5. Expand Var=’Post”
6. Now paste this code into the box and click on >
Save
<b:includable id=’post’ var=’post’>
Just below/after above code paste the following code:
<b:if cond=’data:blog.pageType == "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOubtDSlMMdTunJL03HOFekgSOJycYcsG4UIJL8yECzNvfF3rxb4POncOFPDNQZv88iWi6ACSZl1FTS9usfa0T3ezz_6v4LOwgYhLdDa9D-2Fa5DTed4Jrh1Ib1uGiCI28_N7MOW212l6v/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOubtDSlMMdTunJL03HOFekgSOJycYcsG4UIJL8yECzNvfF3rxb4POncOFPDNQZv88iWi6ACSZl1FTS9usfa0T3ezz_6v4LOwgYhLdDa9D-2Fa5DTed4Jrh1Ib1uGiCI28_N7MOW212l6v/s400/gc_social_sprite.gif') !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class=’mbt_social_floating’>
<script type=’text/javascript’>var switchTo5x=true;</script>
<script src=’http://w.sharethis.com/button/buttons.js’ type=’text/javascript’/>
<script type=’text/javascript’>stLight.options({onhover:false});</script>
<span class=’st_fblike_vcount’ displaytext=”/>
<span class=’st_twitter_vcount’ displaytext=” st_via=’NapsterRaja‘/>
<div style=’margin:5px 0 0px 0;’>
<center>
<a class=’pin-it-button’ count-layout=’vertical’ expr:href=’"http://pinterest.com/pin/create/button/?url=" + data:post.url’>Pin It</a>
<a href=’javascript:void(run_pinmarklet())’ style=’margin-left:-46px; width:43px; height:20px; display:inline-block;’/>
<script src=’http://assets.pinterest.com/js/pinit.js’ type=’text/javascript’/>
<script type=’text/javascript’>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style=’margin:0px 0 0 5px;’>
<span class=’st_plusone_vcount’ displaytext=”/>
</div>
<div class=’addthis_toolbox addthis_default_style ‘ style=’margin:5px 0px 5px 8px;’>
<a class=’addthis_counter’/>
</div>
<script src=’http://s7.addthis.com/js/250/addthis_widget.js’ type=’text/javascript’/>
<script type=’text/javascript’>
var addthis_config = {
ui_cobrand: "MY BLOGGER TRICKS",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class=’st_email’ displaytext=”/>
<p style=’ line-height:0px; font-size:10px; font-weight:bold; text-align:center;’>
<a href=’http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html’ style=’color:#CAC8C8;’>Widgets</a></p>
</div>
</b:if></b:if>
Save the template and just change the “
NapsterRaja” to your own Twitter user name.
That’s all.
This widget will be displaying on the post pages not on home page, so
just visit one of your posts to see the widget live on your blog.