How To Add Floating Social Media Buttons On Blogger

Social media presence is a great way to drive traffic to our website. Since most of people already have a social media account, a website shared by a single person can possibly make thousand page views instantly. Because of this, many articles suggest social media button as one of a must widget on a website. 

Putting social media button on blogger is easy, just follow these steps and watch your traffic grow.

STEP 1

This tutorial is risk free but still, its better to backup your existing template incase some unusual things happen. We can do this by choosing Template > Backup/Restore > Download Full Template. 

STEP 2

Choose Layout > Add Gadget. A new window will appear where you will paste the code see STEP 3.

STEP 3

Paste the code below to the new window and choose Save.

<div class='widget-content'>
<!-- Floating Buttons -->
<style>
  #floatingbuttons {
  border:1px solid #d3d3d3;
  border-right:none;
  position:fixed;
  width:65px;
  margin-left:-77px;
  bottom:0%;
  z-index:10;
  background:#ffffff;
}
#floatingbuttons .floatbutton {
  clear:both;
  margin:5px 4px 0 4px;
  text-align:center;
}

.floating-footer, .floating-footer a{
  font-size:12px;
  font-style:bold;
  color:#cccccc;
  background:#2d2d2d;
}

</style>
<div id='floatingbuttons' title="SHARE THIS POST!">
    <center>
        <!-- Start: Social Media Button -->  
        <div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
        <div class='floatbutton' id='google+'><g:plusone size="tall"></g:plusone></div>
        <div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
        <!-- End: Social Media Button -->      
        <!-- Start: Get This -->
        <div class="floating-footer"><a href="http://www.traffic-hunger.com/2013/03/how-to-add-floating-social-media.html"><span class="url">GET WIDGET</span></a></div>
        <!-- End:Get Button -->
    </center>
</div>
<!-- End: Floating Button -->

<!-- Start: Script -->
<!-- Facebook -->
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<!-- Twitter -->
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
<!-- End: Script -->
</div>

STEP 4

Put the widgets on the bottom of the Blog Posts widget and choose the Save Arrangement. We need to do this because the widget will not display correctly if its on different position.

Now you can preview your newly installed widgets and enjoy the benefits of social media.