How To Add Social Media Share Buttons in Blogger Vertically.

Social media share buttons  are very important for every blog.Making  social sharing easy is significant part of creating successful blog.Your blog content must be easy to share, so that your audience can easily share on other social sites like Facebook, Twitter and Google+

Adding social media buttons

Adding social media buttons to blogger is as easy as ABC. Today I am going how you can add social sharing buttons widget in your blogger blog vertically. This special widget has following options facebook like, Stumble Upon, Twitter Share, Digg this and Google+. This widget also provides facility to add some other buttons of your choice.

How to add social media sharing buttons in blogger

To add social share buttons in blogger blog you have follow these simple steps.

Step 1  log in to your blogger blog

Step 2:  Go to Layout

Step 3: Click on add Gadget

Step 4: select HTML/JAVA SCRIPT
Step 5 copy the code below and paste there.

---

<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%; 
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from www.hackersfall.org">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='mybloggingtrack' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #1F10F7;" href="http://www.hackersfall.org">widget</a></div></div></div>

---

 step #6 Press the save button.and you are done

To customize the placement of bar : 

To change vertical aligment change 15%

To change horizontal aligment  change 721-
adjust both these according to your template design.

Replace mybloggingtrack  to your own  twitter username.

For more blogging features like this , stay with us. like and follow us on facebook and google .plus.

Browse More Articles

Tweet

Written by Ashish Gahlawat

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.