BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Awesome Floating Social Share Widget for Blogger


Awesome Floating Social Share Widget for Blogger
Awesome Floating Social Share Widget for Your Blogger Blog.
Social Network Sharing is one of the major contents regarding Blogger SEO, Though you must have any social share widget on your blog to allow Blog Readers or Users to share your blog content on Social Network Sites which helps to increase your Social Backlinks and SEO Score.
In this post we are going to learn about Adding a Floating Social Share Widget to your Blogger Blog, last time I had posted about “Awesome Social Sharing Widget below Blog Post for Blogger” It was really nice you should try it.
This widget is originally developed by, thanks to Mohammad for this widget. I did several changes in it as I have added facebook send button to it which helps you and blog users to send you blog post link directly to facebook friends and groups. Also i have enhanced its width and some extra paddings to make it totally comfortable with your blog.

Unique Features About This Widget :
  1. Fixed position while scrolling the blog.
  2. Highly Customized Widget Theme.
  3. Widget doesn't affect blog loading time.
  4. Contains most Popular Social Share Tools. [Facebook Send, Like, Twitter Tweet, Pinterest Pin It, Recommend on Google+, Stumble Upon , Addthis Multi-Share etc etc]
  5. CSS Optimized Widget.
  6. Tested and 100% Works with IE and Chrome.
  7. Easy to Install.
The widget is totally awesome as you can see in below image or a live demo of this widget at left side of this page. As its name is Floating widget it usually floats beside a page i.e. it has a fixed position else nothing that's the simple logarithm behind it ! It basically consists all popular social share tools like Facebook Send, Like, Tweet, Stumble Upon Share, Google+ Recommendation etc etc , these are really helpful and gives an mature user experience to Blog Readers or Users. I have added one Dynamite to this widget :D , Yeah ! You can use Facebook Send Button to Share your Blog Content Directly on Different Facebook Groups, which means unique visitors and traffic, so its best tool for bloggers and publishers ! 
You can see the screenshot of this widget below :
Awesome Floating Share Widget for Blogger
Now would you like to install this widget on you blog? Its very easy just follow below steps :
1. Go to Blogger > Dashboard > Template.
2. Click Edit HTML > Find this code <b:includable id='post' var='post'>
3. Now After finding the above code , copy the below code and paste it below the
 <b:includable id='post' var='post'>  code.
Simply copy this code -
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
    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; 
.mbt_social_floating .mbt_side_social_button{ 
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ 
.mbt_social_floating .st_fblike_vcount{ 
.mbt_social_floating .stButton_gradient{ 
    background:none !important; 
    height:21px !important; 
    padding-left:0 !important; 
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { 
    background:urlundefined&#39;;) no-repeat !important; 
    height:19px !important; 
    width:45px !important; 
    padding:0 !important; 
.st_email .chicklets{ 
    background-position:0 -77px !important; 
    background-image:urlundefined&#39;;) !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{ 
    background-color:#f8fbfc !important; 

    margin-bottom: 0px; 
    display: block;

    margin-bottom: 3px; 
    display: block; 

    margin-bottom: 5px; margin-top: 3px; 
    display: block; 
.mbt_social_floating .stBubble{ 
    background-position: 21px 31px !important; 
    height:35px !important; 
}.mbt_social_floating .st_pinterest_vcount{
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    background-color:#fbf8f8 !important; 

.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:urlundefined'') !important;

    margin-bottom: 0px;
    display: block;


<div class='mbt_social_floating'> 
    <script type='text/javascript'>var switchTo5x=true;</script> 
    <script src='' type='text/javascript'/> 
    <script type='text/javascript'>stLight.optionsundefined{onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script> 
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>--> 

<b:if cond='data:blog.pageType == "item"'>
<div style='margin:0px 0 0px 4px;'><div id="fb-root"></div><script src=""></script><fb:send expr:href="data:post.url" font=""></fb:send>

<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src=''/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div> 

    <span class='st_twitter_vcount' displaytext='' st_via='rohitasare1'/> 
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'> 
    <span class='st_plusone_vcount' displaytext=''/> 
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'> 
<a class='addthis_counter'/> 
<script src='' type='text/javascript'/> 
<script type='text/javascript'> 
var addthis_config = { 
     ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, 
ui_header_color: &quot;#ffffff&quot;, 
     ui_header_background: &quot;#0080FF&quot; 
<span class='st_email' displaytext=''/> 
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='' style='color:#CAC8C8;'>Get</a></p> 
4. That's it ! Save the Template.
5. Go to Your Blog and check the widget. You have to replace “rohitasare1” to your twitter username.
Please don’t remove the attribution link from this widget or it will not work properly !
Don’t forget to Subscribe Us and Share This Article, You can also Add Our badge as a Reputation :-) Do you have any questions? Just drop them in comment below or simply saying thanks can give me big pleasure ;-)


  1. can you please tell me how to add the widget like the social widget column that your blog has (at the bottom of post)

    1. Sure mate, you can try our Social Share WIdgets :)
      Link :
      or you can also check Social Share Widgets in "labels"
      Thanks for being here :)

  2. Hi! It didn't work for me. I tried like 3 times already but it didn't work. And this is the only thing close to the code you're talking about --> Is that what it is? Thank you!


Powered by Blogger.