Help Us Improve. Please let us know if you were asked any of these questions.

More Questions

Sticky Social Bar for Blogger sites - Facebook , Google Plus , Twitter

Simplest way to get Sticky bars for blogger and other sites.

Step 1 - Go to Layout.

Step 2 - Add an HTML / Javascript Gadget just below the Blog Post and add the following code -

#stickySideBar {
        margin:0 0 0 5px;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
#stickyBar {
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !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;}

<div id="stickyBar">
   <div id="stickySideBar">
      <table cellpadding="1px" cellspacing="0"> <tr><td style="padding:5px 0 2px 0;">

    <a name="fb_share" type="box_count" href="">Share</a><script src="" type="text/javascript"></script>

       <td style=" padding:5px 0px 0px 0px;">
           <script src='' type='text/javascript'> {lang: &#39;en-US&#39;} </script> <g:plusone size="Tall" expr:href="data:post.url"></g:plusone>

        <td style="padding:5px 0px 0px 0;">
            <a href="" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src=""></script></td></tr><tr><td>              <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center; font-color:blue"><a href="">Sticky Bar</a></p>


This will add the following sticky bar with position as center left.

To Change Facebook Share button to Facebook Like Button.

Change <a name="fb_share" type="box_count" href=""> in the above code
<a class="addthis_button_facebook_like" fb:like:layout="button_count">

To change the background color so that it matches your site theme 

Just the change the following code  within #stickySideBar

( #6666ff for Blue , #ffffff for white , #666666 for grey )

Get a complete list of colors.

To change the position of Sticky Bar

Change the following with #stickyBar

(30% for center left , 15 % for bottom left and 50 % for top left )

To Change the width of the bar

Change the following with #stickyBar

( increase the margin to make it wider )

Want Full length Social bar with additional buttons for

  • Linked In
  • StumbleUpon
  • Reditt
  • Pin interest

Check this at

 Stay Updated with Java Posts directly to your mailbox.
Enter your email address:

Subscribe to Java News and Posts. Get latest updates and posts on Java from
Enter your email address:
Delivered by FeedBurner
comments powered by Disqus


Try our new Java Interview Questions Search Tool.

There are more than 1000 questions with practice tests.

It's updated daily and It's Awesome.


Try our new Java Practice Test tool.

There are more than 200 questions and expanding quickly. It's updated daily and It's Awesome.