Add Floating Share Widget With Social networking birds

Unknown 02:26



Now you know social bookmarking/networking sites are key thing to get more traffic.So sharing your contents on those site is very important.Most of those sites have high pr rank and you can create quality backlinks to you site.So it is better to add sharing widget.Then others can share your blog very easily.I thinks this floating widget is more beautiful than the common one.So it will get attention of readers easily.Let's see how to add it.


First login to your blogger account and go to designScroll down and select html/javascript from the list.
Now copy the below code and paste it on blank space.

Style 1                                                    
<style>


#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-10px;
z-index:10;
float:left;
padding-bottom:2px;

}

#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:63px;
        margin:0 0 0 5px;
}

.fb_share_count_top {width:52px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>




<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">


    <tr>
    <td style="padding:5px 0px 0px 0;">
<center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_fR8onzZ9PnMjX7Wgz_1eaJFGZ-FDwLfYMiHqImKcdDCnIxfiBeihEWa7iwTMZw0WzCTSoKZKebLzl00VdyZwQUcQG1Io92WtVoSlay0MfWUNy60gXp_GEa3gSicV7UDlcJSHs3sE2e-k/s1600/twitter+2.png" />
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="vikramtipz">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
   </center> </td>
    </tr>

    <tr>
    <td style="padding:5px 0 2px 0;">
<center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0734G-fYqBIlcvmYFHOj7t8IpijZy-nZmgxc03CTmIJeKZe_SCPMNQ4DNxMFzI4gi6zGp-hpdpfA9heZYLXgvHA3H4UJaawHChNLEnXXus-WjXw8fmu1Cw35pEPd78xe2b4xmdUahNeu8/s1600/facebook+bird+2.png" />
    <a name="fb_share" type="" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></center>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<center>

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO6GZPhShbtmYjXmyBfElV-W2wza4SNc7U12SsUc8_KdeV_7rgNRoT1Q7r8irtzrIwxnALvi3zHPMh7pIWNXyMSm_GOsoU87RF6vHdZWaKLpAGPxlvCF_-eC4yjZFdRqPjO87yL_3mWQO/s1600/goog%253Be+plus4.png" />
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" annotation="none"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</center>

</td>
    </tr>
<tr>
<td style=" padding:5px 0px 2px 0px;">

<center>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnPiIYyNB0YF_wIhHFEVxqnfb9QGzAxEcitFUgVL_ZYJXCG58DNNRhv7wqbK0YboGIX1pF7ouXRwBp3eQg4ERAmIO9iQhwJWhj0Q7vd4_5HeGyzlhpqnDJeGaEbZiO_kxwcxfyxZ4EKLu/s1600/stumble+2.png" />
<!-- Place this tag where you want the su badge to render -->
<su:badge layout="3"></su:badge>

<!-- Place this snippet wherever appropriate --> 
 <script type="text/javascript"> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
      li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script></center>

</td>
</tr>

<tr>
<td style=" padding:5px 0px 2px 0px;"><center>
<a href="http://digg.com/submit?&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'diggs','toolbar=no,width=1020,height=600'); return false;" onclick="window.open('http://digg.com/submit?&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'digg','toolbar=no,width=1020,height=600'); return false;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IhkmdUtxRZpc7ofRAFRgAQ5ewy5nk8R44QCG_uEiA2xBNthg6mWDkptU8sT1upaOR59o1J7PvJnOH3RJJVwWjQAVPFdbqqfsvKAH_sDYJIvdlWMesIXP0v3E2SpJG3GjJn3wcYm5w3Ez/s1600/digg+2.png" alt="Digg button" width="50" height="50" border="0" /></a><center>
<b><span style="font-size: small;">&nbsp; <a href="http://digg.com/submit?&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'diggs','toolbar=no,width=1020,height=600'); return false;" target="_blank">DIGG</a></span></b>
</center></center></td>
</tr>
    <tr>
    <td>
<center>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="
http://www.tech-cave.com/2012/01/add-floating-share-widget-with-social.html
">Get This</a></p></center>
    </td>
    </tr>
    </table>
</div>
</div>

Replace vikramtipz with your twitter name


Style 2 - Transparent                                      
<style> #floatdiv { position:fixed; bottom:15%; margin-left:-10px; z-index:10; float:left; padding-bottom:2px; } #mbtsidebar { background:#fff; border-top:5px solid #ddd; border-left:5px solid #ddd; border-bottom:5px solid #ddd; border-right:5px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:63px; margin:0 0 0 5px; background-repeat:no-repeat; background-color:transparent;} } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0"> <tr> <td style="padding:5px 0px 0px 0;"> <center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_fR8onzZ9PnMjX7Wgz_1eaJFGZ-FDwLfYMiHqImKcdDCnIxfiBeihEWa7iwTMZw0WzCTSoKZKebLzl00VdyZwQUcQG1Io92WtVoSlay0MfWUNy60gXp_GEa3gSicV7UDlcJSHs3sE2e-k/s1600/twitter+2.png" /> <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="vikramtipz">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </center> </td> </tr> <tr> <td style="padding:5px 0 2px 0;"> <center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0734G-fYqBIlcvmYFHOj7t8IpijZy-nZmgxc03CTmIJeKZe_SCPMNQ4DNxMFzI4gi6zGp-hpdpfA9heZYLXgvHA3H4UJaawHChNLEnXXus-WjXw8fmu1Cw35pEPd78xe2b4xmdUahNeu8/s1600/facebook+bird+2.png" /> <a name="fb_share" type="" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></center> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;"> <center> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO6GZPhShbtmYjXmyBfElV-W2wza4SNc7U12SsUc8_KdeV_7rgNRoT1Q7r8irtzrIwxnALvi3zHPMh7pIWNXyMSm_GOsoU87RF6vHdZWaKLpAGPxlvCF_-eC4yjZFdRqPjO87yL_3mWQO/s1600/goog%253Be+plus4.png" /> <!-- Place this tag where you want the +1 button to render --> <g:plusone size="tall" annotation="none"></g:plusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </center> </td> </tr> <tr> <td style=" padding:5px 0px 2px 0px;"> <center> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnPiIYyNB0YF_wIhHFEVxqnfb9QGzAxEcitFUgVL_ZYJXCG58DNNRhv7wqbK0YboGIX1pF7ouXRwBp3eQg4ERAmIO9iQhwJWhj0Q7vd4_5HeGyzlhpqnDJeGaEbZiO_kxwcxfyxZ4EKLu/s1600/stumble+2.png" /> <!-- Place this tag where you want the su badge to render --> <su:badge layout="3"></su:badge> <!-- Place this snippet wherever appropriate --> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script></center> </td> </tr> <tr> <td style=" padding:5px 0px 2px 0px;"><center> <a href="http://digg.com/submit?&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'diggs','toolbar=no,width=1020,height=600'); return false;" onclick="window.open('http://digg.com/submit?&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'digg','toolbar=no,width=1020,height=600'); return false;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IhkmdUtxRZpc7ofRAFRgAQ5ewy5nk8R44QCG_uEiA2xBNthg6mWDkptU8sT1upaOR59o1J7PvJnOH3RJJVwWjQAVPFdbqqfsvKAH_sDYJIvdlWMesIXP0v3E2SpJG3GjJn3wcYm5w3Ez/s1600/digg+2.png" alt="Digg button" width="40" height="40" border="0" /></a><center> <b><span style="font-size: small;">&nbsp; <a href="http://digg.com/submit?&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'diggs','toolbar=no,width=1020,height=600'); return false;" target="_blank">DIGG</a></span></b> </center></center></td></tr> <tr> <td> <center> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.tech-cave.com/2012/01/add-floating-share-widget-with-social.html">Get This</a></p></center> </td> </tr> </table> </div> </div>

Replace vikramtipz with your twitter name 

Now save it.You are done.


Share this with your friends.If you got something don't forget to put a comment 
Tags:

Post a Comment

0 Comments

Post a Comment