new stylish floating bar for blogger

blogging is one of the best way to increase knowledge share it with others now a days million of peoples do blogging some for share and some for their personal stuff and in this way they are making there blogs beautiful and more beautiful in this purpose social sites are playing a vital role and bloggers use social sites for getting traffic and popularity on search engines and on social sites and now you can see that social sharing buttons on all blogs because blogging is incomplete without social sharing . So i come up with a new blogging widget with which you and your visitors easily share your posts on many of social networking sites.
here's the live demo of new social sharing bar and it is a floating bar which can float on both side i.e left or right. You can easily add this widget in blogger with simple steps .

Steps to folloW

  • goto your blogger dashboard
  • now go to template and click proceed
  • now find <b:includable id='post' var='post'>
  • now paste following code just below that 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: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUOrbTLU_GjtgJFq90dMxodHoWL19alESllxJchRBpItkSye5G9Sc3eLQi3baRtzZwEDsvp2ocb5mYCmzEgtAUbRar_twrmjAxlZc8RL_LUbk81DuzqJzifM_fAsLw78WwjYnV5XVpX53/s32/twitter.png") repeat scroll 0 0 transparent; }
    #btnt-social ul li a.facebook { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VPHOSjDioKLwZWF5VgNt2USSmRF4415WLh7t6yEx2clJixzHVWUXiQ9rO30utZ26toJM1VOrF4SMfZpCzA7mIfp_TmoK1G4xwIEYsSelVNXM1ECFdXnuju0kQ86UHRF4LjX0likbKqfz/s32/facebook.png") repeat scroll 0 0 transparent; }
    #btnt-social ul li a.stumbleupon { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLvRMdMk3emMWeoeSiwxAByvHs7VtGggOQejoBRM7cK5iLpN0OuPQ7Gw36nKMZsywv4WE-9p0Ytv-Cd_rdy56xHPF7Ar4ZLRZk8fIMJRbL63Rpp-TlQeH6B4D-NFGgjk2f3ufwKv-bcrtw/s32/stumbleupon.png") repeat scroll 0 0 transparent; }
    #btnt-social ul li .google-plus { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkytzMW3bLwKfk7Qu9a9kSFACMjbgMyIkdNvg4k1jm-p1XQDGAYjNxmud_BIUfhmoaakKQev3qu_CPPUopByPejup0lZG47EanXFxUwXG0dYDay_b5QlBl2y_Hoc-Ep_sKW0JvXsxh_QOz/s1600/g-plus.png") repeat scroll -1px 0 transparent; }
    #btnt-social ul li a.pin-it-button { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6POiqQfQf8uf5PyfBhMb3yOTiOa_ix6a-3ITKPEmVjZmaTEw1TFpzyV5QJrQ_4Ur1SRspZbmsEx2sQL4i-yWd-0PmAbtF7vt0AX0eNB7NfAMoTrve1FjFWSt3TlmxtSu7ln-UKyJA74e/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: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rJLoRZCv8MJL9l0HDH8vPL1BLeyYfYh11jgiWSJnjUqZ78DATjqm2Vs1XvpRUIuFzLZ6HZPhVyQIJCyiAUBpf7NP8WVutO6yBO4ZYUA27VWBVd31DIjekY0nkzJXjSnPRTnaTE1KNEss/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:voidundefinedrun_pinmarkletundefined))'/>
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
    <script type='text/javascript'>
    function run_pinmarkletundefined) {
    var e=document.createElementundefined&#39;script&#39;);
    e.setAttributeundefined&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttributeundefined&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttributeundefined&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.randomundefined)*99999999);
    document.body.appendChildundefinede);
    }
    </script></li>
    <li><div class='addthis_toolbox addthis_32x32_style'>
    <a class='addthis_button_compact'/>
    </div>
    <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
    </ul>
    </div>
    </b:if></b:if>
    now save the template and its done
    NOTE: if you want to show this bar on homepage also then remove first two line
    thank you

Share this

Related Posts

Previous
Next Post »