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:-

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/AVvXsEiMqwPNtpt9iJ-7CuRmka3iupjAPVzWiNSU09SkNHo4DPkI1lFb0MDC4WrTTA_B4xLnMXen5Sp3pXwfg7J3NAkGeK2aM3NMUxGPe8G3sszUMgKV8FTl4WUnW-OFXka6fND0ZiZvRPJ4vdbU/s32/twitter.png") repeat scroll 0 0 transparent;  }
  #btnt-social ul li a.facebook   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnY-wlrqadaE9WzBpdzyThnyqmGNVej_WZf3tliI6B70WGFuKVfGo4uBTpnNf3AMKhtm9oycB8UxobFn7UT-JmliDe5AsUjVhAdWbXMet6DQbNz6q2n85wYknX5Hr1WCPoodYAF6Ji8ieX/s32/facebook.png") repeat scroll 0 0 transparent; }
  #btnt-social ul li a.stumbleupon  { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5w2F4X6A7OBeJqB-oljteex6Q_RHBX93mzPcUXHfC64Mt9FX-tvVZycnbgyjEFHxePNa4EXD3J-fASfV5ag09Cyy1_bmLOz5_6h0OkisibWKyrMlUqqQ_FYlKObLKZCamWniIjwR-Ya7E/s32/stumbleupon.png") repeat scroll 0 0 transparent;  }
  #btnt-social ul li .google-plus    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsuAFN_ahBe9El59Gz-kcf6UKkdh6SMB8FcFtxLZLsWmI2REgIfnBg1IuOVLYPxeIvyYwiWAVQaGtWk7tWeHdw9lekpTrU6ugVF7epDeTsbS4msYwhiy-Rc8D7KwweYAH5EAPL-D6Z-x2y/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/AVvXsEiXag6Il4BER3C08RC9kV8fLOrXat0OWVBQVlLBnPQoXMgDsHyvaMwxao6hY4b4qK-xVjmKGRVT7OG7r_4ECysjXcfAAlPpM_1zbHiyN0Lv2egyQZyH2NWTa25hZwKO3ViWOc-hBtvWOrIx/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/AVvXsEhb9v1vEi9ShbIQUU5V06WWkpzKz7WHinLPqxM8szGL_JkAf8N2x8t1pogNAhEloaawzxlIUGd7AtOKiOYKmlllBNSLsjL4zsYUdpzPdR0figqzXUlxYr6eRWvP30DXduBekTGqgGaPn81a/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 kafetaria 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.

Share this post