How to add floating social media buttons to Blogger?

Maybe all bloggers know how importance social media websites are. But I will still share and cite why social media sites are important especially to all bloggers, website owners. By this social media sites, are content can be spread without paying a single centavo.

With the social media websites, our website can create great traffic and revenue especially if your purpose why you create blog is to earn extra income. Since the very know equation to most of bloggers, more traffic equals more money earned.

Now if we put social media buttons to our blogs your visitors, readers, fans can easily share our content. Since it will automatically published online.

After giving you an idea why social media buttons to our blogs, it's time to give a simple tutorial on how to add floating social media buttons to Blogger blogs.


Steps on how to add floating social media buttons to Blogger.


1. Go to your Dashboard >> Layout
2. Add Gadget and choose HTML/Javascript.
3. Paste this code

<style>
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mynameis-dot-in-sidebar {
        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:60px;
        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="mynameis-dot-in-sidebar">
    <table cellpadding="1px" cellspacing="0">
<tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="itsblogjomar">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td></tr>
<tr>
<td style="padding:5px 0 2px 0;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script> 
<script type="IN/Share" data-counter="top"></script>
</td>
</tr>
 <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" 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>
    </td> </tr> <tr>
    <td style="padding:5px 0 2px 0;">
 <script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
 </td>
    </tr>
<tr>
    <td style="padding:5px 0 2px 0;">
<div style="float: right; margin: 4px;"><a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img alt="Pin It" class="aligncenter" src="http://img.photobucket.com/albums/v419/green_tea/pin.jpg" /></a></div>
</td></tr> </table>
</div></div>

That's it!

On this tutorial on how to add floating social media buttons to Blogger, available buttons are Twitter, Stumbleupon, Google +, LinkedIn, Facebook Share, Digg, Pinterest button. If you want to add more social media buttons just put <tr> </tr> tag.

Hope you enjoy this simple tutorial on how to add floating social media buttons to Blogger. Don't forget to like, share, tweet, bookmark and leave comments! XD

Share on Google Plus

About Jomar Lipon

Web Developer at your service and frustrated blogger in Cebu. Author of JomarPH.com, SEO Specialist.