Pin It Now!
Social Media is a very popular way to
get free traffic for your blog or website.There are so many social
media sites available on Internet that if used properly,they alone can
boost your revenue by generating handsome amount of traffic.Some very
popular sites are facebook,twitter,stumble upon,digg etc.
Not
only your shared links but your readers shared/posted links also play
an important role in getting higher position in search engines.The more
people share your site,the more traffic you get.But this process of
sharing posts and favorite pages is very hectic which many people
avoid.No worries now,here i am presenting a quick solution to this
common problem of bloggers and readers.Now your readers can share and
like the posts without leaving your blog.
Here is a tutorial on how to add a Mashable-Like Floating bar of social media button to a blogger blog.
1)Go to Blogger DashBoard.
2)Go to Design >> Page Elements.
3)Click Add A Gadget.
4)In Add A Gadget window, Select HTML/Javascript .
5)Copy the below code and paste it inside the content box.
<!-- floating page sharers Start http://toolsandhacks.blogspot.com/-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !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='pageshare' title="Get this from http://toolsandhacks.blogspot.com/">
<div class='sbutton' id='fb'>
<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>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' 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='sbutton' 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 href="http://tutorialsandtricksforall.blogspot.com/2011/08/how-to-add-floating-social-media.html/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating page sharers End -->
6)Save the gadget.
7)Drag the gadget and reposition it as per your choice.
8) Click Save button on upper right corner.
You are Done!!!
Subscribe To Get FREE Updates!
