All Blogging Tips And Tricks for Bloggers: How to add floating social media widget into your Blogger, Wordpress and other websites?

Sunday, 15 November 2015

How to add floating social media widget into your Blogger, Wordpress and other websites?

floating widget

How to add floating social media widget into your Blogger, Wordpress and other websites?

Social media sites such as facebook, google plus, twitter etc have an incredible role in blogging world was well as other websites. Each and everybody want to include social media widgets into their blogs or websites. Today I am going to share an interesting idea, a floating widget session for your social media icons. If it is there with your left side of the post, it will be quite interesting. Definitely you have seen many floating widget on different sites, but in many cases this widget floats over post body when you decrease the size of a window, right, you might have noticed that. If it is so you may lose your visitors from your sites because the visitors won’t read the post properly. So I would like to provide floating widget, which will float beside your post and the interesting thing is that if somebody wants to decrease the browser window size it will remain with its original position where it was and never float over the post.

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

<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.bloggerstonic.blogspot.in" 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>

Note:

If you want adjust the position of this widget on your site, just follow this, you can adjust its position bit up or down by changing the value of bottom:15%. The same way if you want to get its position bit left or right then just change the value of margin-left:-100px.

Regards

Tamanna. J