Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

New Floating social bookmarking widget for blogger 2012

On By // 28 comments
Advertisement
New Floating social bookmarking widget for blogger 2012
Hi Friends Almost Two months I cant Publish Any Article Due to Semester Exams. Now It's All over And the Holiday Was Started. Now I'm going to Publish an Updated Version Of the Previous Floating Bar. The New Version of this Widget Is Fast loading, Minimal Look and has the Floating Feature like the previous version. This Widget contains Sharing Buttons Of Popular Social Networks like Twitter, Facebook, Google+, StumbleUpon and Pinterest. It's Also Integrated this widget with Add This Plugin So, now with the new version we can share our content to more than 300 Social Sharing sites. OK Lets see How to add this social bookmarking widget for blogger.
Before that We can see the live demo of this widget.
Live Demo:-

How to add this Social Bookmarking widget on your blog?

It's Easy to Install this widget in your blogger blog. To add it just follow the simple steps given below.
  • In Dashboard Go to Template > Edit HTML Button
  • Ignore the Warning and Click the Proceed button
  • Then Click Expand Widget Templates
  • Search for <b:includable id='post' var='post'>
  • Below that place the following code
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/
    #btnt-social {  bottom: 10%; margin-left: -50px; position: fixed; }
    #btnt-social ul { list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
    #btnt-social ul li { display: inline;background:none;margin:0;padding:0;}
    #btnt-social ul li a { display:block;  width: 32px; height:32px; margin: 5px 0; }
    #btnt-social ul li a.twitter    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixCxXCvzPUuXVRu81swMPZsvOI4BOHwr3EHAEwhyI7w4DwYr1F_zBfVFrL59Uolf5MVnMBUMYVjqmNf0wsaOEYAhohsOW0eegcnz4Py9J_F7J_Wk99gOBNtdOBSHqGa-YAfWt-rQ-Py87N/s32/twitter.png") repeat scroll 0 0 transparent;  }
    #btnt-social ul li a.facebook   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcv5adr4Qtm-Cyj5vPDAq4slSAXEZ1VFp1GPFwMhQZGhml7EwQI5KlvOe_8beM7KvmZgBreLchtUTJbyC_LBX2oQFUh1MKG-8-DxN5MyJSgIuQWIiQnyZkea-Qtc7GDLmMo0COTgaVClmX/s32/facebook.png") repeat scroll 0 0 transparent; }
    #btnt-social ul li a.stumbleupon  { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwXDHwzfAF5BibpGgFbiH3dtqn6xWv98xwYpFA_PPI6RY3Mu_yTuDFTiT7vEuTNrB-24JkNkM2PDgexFlKuG-ZV0m7H8mxzpsoe3mwUEgEZU7SeKfr-w4QLRv8Kc09LB_45m3iAP3OGDg/s32/stumbleupon.png") repeat scroll 0 0 transparent;  }
    #btnt-social ul li .google-plus    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6whMmZs-AlaD3MM6G4swXcTxGK4KEiaAHCMW0ke4vkSxsCMGFMpcAaTVYM5hWmgmlSo2JErgzT4tz6bG_3jOehalXv-Bxz9UGWHPUII5zOWWksRwiV3vXgvIA4XgcvTkpE8tUsjjOjJC/s1600/g-plus.png") repeat scroll -1px 0 transparent;  }
    #btnt-social ul li a.pin-it-button   {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXMnjGlZMy0szoYpbnR891ZEAsqVWN1QIGt8RNDgFvNzyfBQjjHkToefh7ua0Tvw2_FcJ2eewcx1JRGPcYe2kMLW694gCvWz9j8vTWMxQQ0bHJDJ2MwazR9M15myikbyRxsN2CPjZCxTz/s32/pinterest.png") repeat scroll 0 0 transparent;  }
    #btnt-social ul li .addthis_32x32_style .dummy .at300bs, #btnt-social ul li .addthis_32x32_style .at300bs, #btnt-social ul li .addthis_32x32_style .at15t   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGTjtGQY5m-9XI-vkOXG9hADolQQmZLxuTm-O-3He55gQiqIyP1T9rgfZeDqtkxnVIxedOMrr1FSMDmSxxuVvSnRfECWNUQa1Ns3_AgOBT30LRwAeckuj_XNVfFenrjeMCqZ3yfx2HsxmF/s32/sharethis.png") repeat scroll 0 0 transparent;  }
    /*]]>*/
    </style>
    <div id='btnt-social'>
    <ul>
    <li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
    <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
    <li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
    <li><a class='google-plus' expr:href='&quot; http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+ '/></li>
    <li><a class='pin-it-button' href='javascript:void(run_pinmarklet())'/>
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
    <script type='text/javascript'>
    function run_pinmarklet() {
        var e=document.createElement(&#39;script&#39;);
        e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
        e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
        e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
        document.body.appendChild(e);
    }
    </script></li>
    <li><div class='addthis_toolbox addthis_32x32_style'>
    <a class='addthis_button_compact'/>
    </div>
    <script type='text/javascript'>
    var addthis_config = {
         ui_cobrand: &quot;blogtipsntricks.com&quot;,
    ui_header_color: &quot;#ffffff&quot;,
         ui_header_background: &quot;#0080FF&quot;
    }
    </script>
    <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
    </ul>
    </div>
    </b:if></b:if>
  • Now save your template And you can see your post page to check it.

Note:-
This floating bar would display on post pages only and wont display on homepage.

If you Liked it! then feel Free to Share and leave a Comment. Please post any query About this Widget you have in the comment box below.

28 comments:

  1. Hey chander,

    how do you make this appear on the homepage too?

    ReplyDelete
  2. Simple Just Remove the following Code to show the widget in homepage.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    </b:if></b:if>


    And My name is not chander It's chandeep. Call me Chandeep :)

    ReplyDelete
    Replies
    1. Admin. You should change addthis version to latest.

      Find :s7.addthis.com/js/250/addthis_widget.js
      Replace :s7.addthis.com/js/300/addthis_widget.js

      The new addthis have more social site. I hope you change it :)

      Peace, Danial

      Delete
    2. Thanks for Describing. :) I changed it.

      Delete
  3. how to have related post like you?please reply.

    ReplyDelete
  4. Replies
    1. No,It works Fine In your blog(I checked it). You have to see the post page to see the widget working. :)

      Delete
    2. yes. after i fix it myself. please check your script, a lot of undefined code. Anyway thanks for the lovely script.

      Delete
    3. It seems that you haven't changed anything except the margin. It should be changed because of your blogger template design. Most of the sites the widget works fine.

      Anyway I'm glad It worked for you. :)

      Please let me know what type of undefined code you found in this widget.

      Delete
    4. This is the capture screen of your code above. i highlighted the undefined code

      http://i1306.photobucket.com/albums/s563/syahrulzaman/capture.jpg

      Delete
  5. Ohh!! Thanks for mentioning the Errors I Just encountered this error. Now I fixed all errors.

    I think this Error should be caused While Updating this post with latest version of addthis.

    All the opening brackets a Replaced with the word Undefined.

    Thanks for mentioning. :)

    Keep in touch...

    ReplyDelete
    Replies
    1. no problem. glad that i can help u a little bit.

      Delete
  6. Today i have seen your blog and really this is very usefull to me, i got almost all answers in your site... I add almost all widgets that you suggested in my website http://www.cinema65.com/,... Really thanks a lot

    ReplyDelete
  7. I don't know what I'm doing wrong, I went to edit HTML and found , placed your codes and nothing happened, what am I doing wrong?

    ReplyDelete
  8. hey bro this code is not in my template any other way i can add this i really wanna add this please help ...!!
    thank u...!!

    ReplyDelete
  9. hey bro post is really awesome i wanna add widget but this code not in my template any other way i can add this??
    please help...!!

    ReplyDelete
    Replies
    1. Expand Widget Templates then Search it . You will find It

      Delete
    2. i did already but not found...!!

      Delete
    3. Bro, Can you give your blog URL

      Delete
  10. @b:includable id='post' var='post'@

    ReplyDelete
  11. The problem is you've modified the margin of the widget. just reinstall the widget without modifying. It'll definitely Work.

    Thanks for using our widget... :)

    ReplyDelete
  12. Followed your instructions and worked for me, thanks.

    ReplyDelete
  13. Its a Cool looking Widget.. Thanks for the Share!!

    ReplyDelete
  14. Hi,

    I have started using your widgets extensively in my blog and that means I love every awesome widgets you code for blogger.

    I recently installed this widget and is just working fine except that the widget is floating even below the post body i.e. in the footer of my template which I am not very comfortable with. Can please give me solution so that the widget stops floating below the post body?

    Thanks a ton!

    ReplyDelete
    Replies
    1. Sorry, It's not possible by editing the widget.

      Delete
  15. Hello... Chandeep j
    actually i am using Magger blogger template...when i opens a post to read...then belows , related post widget is not working but only widget text is showing...
    i want to show related posts in the end of the post...
    please help me...
    your template is awesome looks

    ReplyDelete
  16. Thanks, this worked great. I didn[t need to expand the widgets, I just clicked Edit HTML and searched for that code and then pasted your code below it. Done!.

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep