Hi guys! In
this post I would like to tell you ‘How to add Floating Social Share bar’.
Generally
bloggers use social networking sites to promote their content and get
visibility. With this widget we can easily access different kind of social
networking platforms at one place.
Adding this
to your blog is so simple that it takes barely two minutes to do so.
Follow these
simple steps:
- Log in to blogger and go to Layout.
- Click on Add a Gadget and select HTML/JavaScript and paste the following code and save it.
- Before saving it change the techpro4u with your twitter account name.
- You can customize this widget according to your convenience.
- By default the position of the widget is left if you want to change it to right change left to right.
- Check out your blog for the changes.
CODE:
|
<!-- Sidebar share buttons
techpro365.blogspot.in--><style type="text/css">
#pageshare {position:fixed; bottom:5%; margin-left:-780px; float:left;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:
#b2e0ff;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
techpro365.blogspot.in">
<div
style="margin-left:8px;"><div class='sbutton' id='like'
style='margin: 5px 0 0 5px;'><script
src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like
layout='box_count' show_faces='false'></fb:like>
</div></div>
<br /><div
class='sbutton'><a class='twitter-share-button' data-count='vertical'
data-via='techpro4u'
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='sbutton'
id='gplusone'> <script type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone></div><br/><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 style="clear:
both;font-size: 9px;text-align:center;">
<a
href="http://techpro365.blogspot.in/"
target="blank"><font color="red">Get
This<font></font></font></a></div><!--
Sidebar share buttons End --></div></div>
|
If you have any genuine queries or facing any difficulties in following the post feel free to ask through the forum or the contact page.
Print Page
.jpg)
