Share
Pin It

Thursday, February 9, 2012

How to add floating social media buttons to Blogger?

4 comments
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.

add floating social media button for blogger


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

4 comments:

Bollywood Gossips said...
May 5, 2012 at 6:12 PM
This comment has been removed by a blog administrator.
Melanie Sheridan said...
July 11, 2012 at 7:05 AM

Hello - I'm getting the same error because of the copyright. Please look for an email from me. Thank you! Melanie

Melanie Sheridan said...
July 19, 2012 at 1:17 AM

Hello - I sent an email about a week ago because I was unable to copy the code. I'll send it again in case Gmail ate the message. Thank you!

Melanie Sheridan said...
July 19, 2012 at 1:33 AM

Disregard! Your reply was in the spam folder. Thank you!

Post a Comment

Read More: SEO

Read More: Blogging