Top Ad unit 728 × 90

How to Add Vertical Social Share Bar In Blog

We make a blog/site.We want to get more and more traffic on blog/web.For that purpose we make pages on fb,google+ etc.We add some gadget on blog.So i search and tried to make a  Vertical Social Share Bar for blog.I gives your blog a very good look.Also user's will be able to share your posts or a article very very quickly.It is very simple and very powerful tool to increase your users.

-------------------------------------------------------------------------------------------------
How to Add Vertical Social Share Bar In Blog:
-------------------------------------------------------------------------------------------------

To add it in blog/web just follow below steps:

  • Go to Blogger.Login to your account.
  • On DashBoad section,Go to Layout>>Add a Gadget.
  • A new tab will open,Now Scroll down and find HTML/JAVASCRIPT.
  • Now Click on HTML/JAVASCRIPT.
  • Paste Below code in content section.
<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-900px;
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 bloggerauthority.blogspot.com">
<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='
nomz890' 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;">Visit<a style="color: #3399BB;" href="http://facebook.com/nomiking8">Nomiking8</a></div></div></div>'

  • Now just replace Highlighted Section with your own twitter account name.
  • Congrats!!You have done it.
-------------------------------------------------------------------------------------------------------------------------
Conclusion:
-------------------------------------------------------------------------------------------------------------------------

So guyz!!By adding this your user's can easily Like/Share you post.More over you can increase visitors if you share posts by this widget.
If you stuck!!Feel free to ask!! 
How to Add Vertical Social Share Bar In Blog Reviewed by Unknown on 00:03 Rating: 5

No comments:

All Rights Reserved by B | S | A © 2014 - 2015
Designed by JOJOThemes

Contact Form

Name

Email *

Message *

Powered by Blogger.