New Floating Social Media SHARING Widget For Blogger 2012

This Social Media widget is pretty old but Very Simple and  Effective one ! If you want to use the newest one there is so many widgets, you can fine many of them in my blog also. But you are looking for a very simple social media floating widget then this one is perfect for you. This widget has been check by me on my blogger and working perfectly.
live demo for floating social bookmarking widgets for blogger

How To Add This Social Media SHARING 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.

Process:
In Dashboard Go to Template > Edit HTML Button
Then Click Expand Widget Templates

Search for <b:includable id='post' var='post'>

Below that "CODE" 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/AVvXsEgjSRB0GX1btXCK-6vbwMcZrS-op5qha6kW6w3nKWzH02LD03jqTt_6xrc_vv9yjtmo0_ZHI3m8kpsy6nRRU6URjrS8Ncmx3PMer3RQw-K0OMhSOgKYIFaJXk3w7ay8du4BxuD4EiBFRnL4/s32/twitter.png") repeat scroll 0 0 transparent;  }
    #btnt-social ul li a.facebook   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgKLQGpuDDc42uDhKsiOCVBgqljD3SFlUvqXB5Y_U7ecWCAY12D5oT-BaqLOz8J4Mg7_RGs2MmqfcuPjiio49jdCNqoXMtObPuWNZwMV_0r8eEwRm5e7Vhd_1So1HPaTnf2HWSpsEfRkw/s32/facebook.png") repeat scroll 0 0 transparent; }
    #btnt-social ul li a.stumbleupon  { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAAEhbRrKy7nfkHiJCtsPEWTpPTnBItnRw2iAw6iDgTIRyq-bHRXInxJXWfcLl-tk9caJhY3hOQyNd0gyM_ZqCe6iEBjed3ps8vbhyaSVrp2gpR2kGvSxHniBxMmlTAoFin14Z3tqd0H7i/s32/stumbleupon.png") repeat scroll 0 0 transparent;  }
    #btnt-social ul li .google-plus    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvOrdljJ_MiiWdTJG2FSGMS-j5s-poE_gY4zahfEdZOrlYsMUkRqoEHHK80ss8qLEzhMofwgbhO2e18wpfMNyHSzdWmAC3i18OCsGO_MzoOcjkI9wEWC6riogVrLdARsUxrZGMOpEwjCyK/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/AVvXsEgq6RTDXAoWiDAXTAgGWVNEvNKqW9fE9lqldJCv4cGhyYZYN4adsv7nr2TADTiN39nzJlkikD-pn63ba2n9hcphrKAV8nTXtv59-fW5tHK4NVfQFa-rhyphenhyphen9kV1dUDjxv1Fqyu3ce18AAvDL1/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/AVvXsEif5yyS7u11q6zrC9MF9UgjmXvmgBh2WMO06nWYuy6r2JtU9GzQ_Wa1Q-sVtwhs0K-0J1O3x_j5w4mHiIVmzYu4ltz8-aMa2QSH_a8ze6cHmLf8QggbFBK44kgG_gFw5qAevwWlSoDEbTun/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.

0 comments:

Post a Comment