How to Add Floating Social Widget For Websites , Blogger , Wordpress

If you are searching for a floating bookmarking widget. which should floating left side of your blog post.Then you came at right place. I have seen many floating widget on other sites. But their widget floats over post body when someone decreases the browser window size. Just because of it visitors won't read there blog properly and they leave there blogs. But I am providing a cool simple floating widget. Which will float beside your post and when someone decreases browser window size it will remain in its actual position and wont float over post body.
  It’s a very simple but attractive floating social widget for your website. You don't need to edit your template. After following our instruction you will add this widget in your site easily. And you will a cool floating widget beside your post with count bar. Which will show you how many times your blog liked, stumbled, twitted etc. 

Floating Social bookmarking widget for your website

Blogger Users	Wordpress Users
Go to Layout Add a widget Select HTML/JavaScript Copy paste the code given below	Go to  Appearance > Widgets  Select text widget and Drag it into sidebar. Copy paste the code given below. Click save.

<!-- Floating widget starts provided by trickolla.com--><style type="text/css">
.sb{
background:#f0f0f0;
cursor:pointer;
color:#fff;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; margin-left:8px;
font:12px sans-serif;
}
.sb:hover{
background:#777;
}
.tl {text-align:center;font-size:10px;font-weight:bold }
#Ps {position:fixed; bottom:15%; margin-left:-100px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; padding:0 0 2px 0;z-index:10;}
#Ps .sb {float:left;clear:both;margin:5px 2px 0 5px;}
#Ps:hover {-moz-border-radius:6px;
    -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
    -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);border: 1px solid #ddd;}
</style>
<div id='Ps'>
<div class='sb' id='fblb'>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
</div>
<div class='sb' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sb' id='gpo'>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
</div>
<div class='sb' id='Tw'>
<a class="addthis_button_tweet" tw:count="vertical"></a></div>
<div class='sb' >
<a class="addthis_counter"></a>
</div>
<div class="tl">
<a href="http://www.trickolla.com" target="_blank" >Get This</a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50bf6c151159d2c0"></script>
</div><!-- Floating widget End provided by trickolla.com-->

NOTE:  If you are seeing wrong position of this widget on your site. Then you can change its position by changing value of bottom:15% for up down the widget position. For changing position left right change value of margin-left:-100px.

Subscribe To Get FREE Tutorials!

Posted by : trickolla

2 Comments

December 6, 2012