Skip to main content

Creating Floating Social Sharing Widget for Blogger

adding-awesome-floating-social-media-buttonsFloating social sharing buttons bar is one of the favourite widgets of every blogger. It’s because of it’s ability to make readers share the posts to social media's right from where they are reading. It’s a must have widget and can improve the presence of your site in social media's like Facebook, twitter etc..
Today we’ll see how to add this awesome widget to your blog in simple steps. If you need a demo simple look at my sidebar.



Adding Social Sharing Bar to Blogger

  • First, Navigate to Blogger Dashboard > TemplateSnap_2013.11.16_10h43m57s_001_
  • Now, take a backup of your template (see how to backup your blogger template)
  • Click on Edit HTML
  • Now search for below code (use CTRL+F to search)
<b:includable id='post' var='post'>
  • And just below it paste the below code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.bloggslab_social_floating{
    position:fixed; bottom:10%; margin-left:-90px; float:left;     width:65px;
    background-color:#FFFFFF;     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;
}
.bloggslab_social_floating .bloggslab_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.bloggslab_social_floating .st_twitter_vcount, .bloggslab_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.bloggslab_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.bloggslab_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.bloggslab_social_floating .chicklets, .bloggslab_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNm7JlrXa4_cy04JwAqoJteLySZfpeF0lxKaIttLbTRsU1Uyos1G4Hp6z57JI3oIUubsOqn6bIR1yTtimvYVnvQTvkuhOdWESCPxseIo25bZcfuCV_3lvrandXu5vUhUfk884AJB3DrKTs/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNm7JlrXa4_cy04JwAqoJteLySZfpeF0lxKaIttLbTRsU1Uyos1G4Hp6z57JI3oIUubsOqn6bIR1yTtimvYVnvQTvkuhOdWESCPxseIo25bZcfuCV_3lvrandXu5vUhUfk884AJB3DrKTs/s400/gc_social_sprite.gif&#39;) !important;
}
.bloggslab_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.bloggslab_social_floating  .stButton_gradient{
    border:none !important;
}
.bloggslab_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;
}
.bloggslab_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;
}
.bloggslab_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.bloggslab_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.bloggslab_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.bloggslab_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}
.bloggslab_social_floating .st_pinterest_vcount .stBubble{
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-D2xp38ZAtHBwFsy_4YZGuLRYDr4e3AsWKrE7x7lMAAegBtmJvFgPx2eg4GbMx3YL5fnxeywkNxqv58ww8rycKkJxQeTPNgujw8CCz3Ep7Y2w_V3XjeiyG2AxCyFtxijjhvmnxkr4-h8T/s400/bubble_arrow_pinterest.png&#39;) !important;
}

.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}
</style>
<div class='bloggslab_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, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from bloggslab list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='sarathraju360'/>
<span class='st_pinterest_vcount' displaytext=''/>
<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: &quot;BLOGGS LAB&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.bloggslab.com/2013/11/sidebar-floating-social-share-buttons-with-counter.html' style='color:#CAC8C8;'>Widget</a></p>
</div>
</b:if></b:if>
NOTE: Replace sarathraju360 with your twitter username.
  • Now simply save the template. You’re done.


TROUBLESHOOTING

If you face any problem with the Facebook like button, then add the below code below <body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


CUSTOMIZATING THE FLOATING BAR

This widget was originally created by Mohammad Mustafa Ahmedzai (My Blogger Tricks) and i am just sharing it with you with some simple customisations. In fact you can also do customize it to match your blogger template. To do that simply change the values of bolded lines in the code.
If you need any help, feel free to leave comments. And if you like this widget, please take your time to share this post with your friends.Flirt male
Labels:

Comments

Post a Comment

Popular posts from this blog

Automatic Read More With Thumbnails for Blogger

Blogger gives us an option to add jump break to posts. It enables us to display a a short summary of the post on the homepage of our blog with a link to the full post. Most of us add jump break to our posts, because displaying a short summary instead of the full post on the main page has many advantages. The main reason is that it increases page views and the visitors can easily get a selection of your posts.
Post a Comment
Read more

Responsive Recent Posts Slider Widget for Blogger

Here is one amazing responsive featured post slider for your blogs. This slider is Here i am with a fully automated featured posts slider for blogger blogs. This widget features a complete responsive design and is coded to fetch the most recent posts automatically from your blog. Yes i said fully automated, you only need to add your blog url in the code.
3 comments
Read more

Recent Comments Widget for Blogger Blogs using simple JavaScript and Feeds

Recent comments widget show the feed of latest comments on your blog in your sidebar. It helps you to boost the engagement of your readers in your blog and also shows the new readers what’s happening on your blog. We have many ways to add one to your blogger blog. And today i’ll share with you two simple methods of adding one to your blog.
Post a Comment
Read more