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!!
