Widgets

add floating social media icons on your blog

Social media is a way to get more traffic to your blogs and websites. Adding the floating Google +1, Facebook, pinterest and Twitter buttons in blogger's blog is therefore very important. Getting these buttons provides you with a great chance to make your site popular among followers.

In this tutorial I will Show you a simple trick to add the floating or Flying  Google +1, Facebook, pinterest and Twitter buttons in your blog .This is so much important for all the bloggers as  a reader reads the post and wants to share your article/post it is so easy for him to do so on Facebook, Google + 1 and Twitter. 
Just follow the simple steps to add the floating Google +1, Facebook and Twitter buttons. 


Social media is becoming more and more important after each and every day. Now the experts says that social media plays a major role in SEO too...strange right? But its a fact, in simple words, the number of peoples who likes/shares your article will be counted in your ranking. So its your responsibility to make it easy for your readers to share your content.

I have seen some prominent blogs using social sharing buttons at the top of the post as well as at the bottom of the post. Yes their strategy is absolutely right and that will give them some extra likes/shares. But using it at top and bottom is bit nasty, there is where this widget will come handy. This widget which is placed just below the post title will floats along with the screen while the visitors scrolls down. Which makes it easier for the visitors to share the posts whenever they like while reading the post.





  • First of all go to the layout and click on "add a gadget".
  • Now A pop-up box will open on the screen.
  • now select the "HTML/javascript" button.
  • Now Enter the code given below here.
=========================================
<style>
#pageshare {position:fixed; bottom:15%; left:105px; float:left; border: 1px solid white; border-radius:2px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px;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;-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="Share This With Your Friends">
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<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='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://www.hotspotech.blogspot.in/search/label/Widget" target="blank"><font color="silver">Widgets<font></font></font></a></div></div>
===========================================
  • Replace http://www.hotspotech.blogspot.in/ with your site name.
  • Click on save gadget.
  • Now All Done.
  • Go to your site and check it out.

1 comment :

  1. It’s my first visit of this webpage; this weblog carries amazing and actually good information in favor of visitors.
    website design

    ReplyDelete

Blogger Widgets