Everyone on this post knows the value of social networking sites for any blog. Social networking sites can boost the traffic on your blog and make you a awesome blogger, so today I have made this post in which I will describe that how you can add floating widget that includes social networking sites share buttons to help visitors easily share your content to their profiles.
Why You Should Add This Widget - The Benefits:
As I mentioned above using social networking sites you can drive a huge traffic to your blog with very less efforts.This widget can make people easy to share content on their social profiles so that you can increase number of visitors to your blog everyday. This widget contains top networking sites such as facebook, twitter, google plus, dig, stumbleupon, pinterest etc. It also shows no. of likes, pins, twits etc.
Steps To Add Floating Share Buttons:
Notes:
As I mentioned above using social networking sites you can drive a huge traffic to your blog with very less efforts.This widget can make people easy to share content on their social profiles so that you can increase number of visitors to your blog everyday. This widget contains top networking sites such as facebook, twitter, google plus, dig, stumbleupon, pinterest etc. It also shows no. of likes, pins, twits etc.
Steps To Add Floating Share Buttons:
- Log in to your Blogger account and go to layout
- Now select add gadget and add HTML/Javascript
- Copy the code given below and save gadget:
<style type="text/css">#social-buttons {position:fixed;bottom:15%; margin-left:-721px;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=""><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='TricksDroid' 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;">Get <a style="color: #3399BB;" href="http://tricksdroid.com/">widget</a></div></div></div>
Notes:
- Replace Tricksdsroid with your twitter username.
- To change sizes replace 15% and 721px.
Have any Questions:
Now you have successfully added floating share widget to your blog but still if you have any questions about its working or other things then feel free to comment below. Keep sharing, happy blogging..
0 comments:
Post a Comment