If you don't have a space for your social subscribing widgets then don't worry.Here I have a solution with this problem.Hide and show them out with smooth jQuery slide out hover effect.This 4 in 1 slide out widget contains a floating facebook like box,your recent tweets,Google +1 button and feedburner email subscription form means all in one :).Here I am providing a widget generator so that you don't need to edit any code,just change my username with yours hit the generate button and finally add the widget.This script for this widget is created by Nitin and we developed the widget generator.Take a preview on gadget



How To Add This Gadget To Blogger?

  1. Replace my username's with yours
  2. Hit Generate Button
  3. And finally add it to to your blog

Widget Generator


Login To Your Blogger Account Before Using Widget Generator





Update - If above widget generator is not visible then use code below....

Copy and paste below code as a HTML/Javascript widget.

<style>
img,a {
    border: 0;
}

#on {
    visibility: visible;
}

#off {
    visibility: hidden;
}

#facebook_div {
    width: 196px;
    height: 340px;
    overflow: hidden;
}

#twitter_div {
    width: 246px;
    height: 353px;
    overflow: hidden;
}

#google_plus_div {
    width: 152px;
    height: 97px;
    overflow: hidden;
    margin-left: 50px;
    margin-top: 10px;
}

#knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;
}

#kakinetwork_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
}/* right side style */#facebook_right {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    right: -200px;
}

#facebook_right img {
    position: absolute;
    top: -2px;
    left: -35px;
}

#facebook_right iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    left: -2px;
    top: -3px;
}

#twitter_right {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    right: -250px;
}

#twitter_right_img {
    position: absolute;
    top: -2px;
    left: -35px;
    border: 0;
}

#google_plus_right {
    z-index: 10003;
    background-color: #F2F2F2;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-right: 2px solid #0056a0;
    border-left: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    right: -154px;
}

#google_plus_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}

#feedburner_right {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-right: 2px solid #5b5b5b;
    border-left: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    right: -303px;
}

#feedburner_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}

#kakinetwork_right {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}

#kakinetwork_right img {
    position: absolute;
    top: -2px;
    left: -101px;
}/* left side style */#facebook_left {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    left: -200px;
}

#facebook_left img {
    position: absolute;
    top: -2px;
    right: -35px;
}

#facebook_left iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    right: -2px;
    top: -3px;
}

#twitter_left {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    left: -250px;
}

#twitter_left_img {
    position: absolute;
    top: -2px;
    right: -35px;
    border: 0;
}

#google_plus_left {
    z-index: 10003;
    background-color: #006ec9;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-left: 2px solid #0056a0;
    border-right: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    left: -154px;
}

#google_plus_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}

#feedburner_left {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-left: 2px solid #5b5b5b;
    border-right: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    left: -303px;
}

#feedburner_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}

#kakinetwork_left {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}

#kakinetwork_left img {
    position: absolute;
    top: -2px;
    right: -101px;
}

.box-title1 {
    border: 1px solid #ddd;
/*border-radius*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
/*box-shadow*/
    -webkit-box-shadow: 5px 5px 5px #CCCCCC;
    -moz-box-shadow: 5px 5px 5px #CCCCCC;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    margin: 10px 0;
}

.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 165px;
/*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px;
}

.submitbutton {
    background: #F2F2F2;
    border: 1px solid #F66303;
/*box-shadow*/
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
    font: bold 12px Arial, sans-serif;
    color: #000000;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
/*border-radius*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>
<div id="on">
 <div id="facebook_right" style="top: 18%;">
  <div id="facebook_div">
   <img src="http://4.bp.blogspot.com/-pzM3IebaPHg/T3BF_Cp5ChI/AAAAAAAABTA/uPlhRvqJF2Y/s1600/helperblogger.com-facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">
   </iframe>
  </div>
 </div>
</div>
<div id="on">
 <div id="twitter_right" style="top: 35%;">
  <div id="twitter_div">
   <img id="twitter_right_img" src="http://2.bp.blogspot.com/-DoXgccAh568/T3BGBaBhUUI/AAAAAAAABTY/apMnhTjbnnU/s1600/helperblogger.com-twitter-icon.png"/>
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('helperblogger').start();</script>
  </div>
 </div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 52%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="http://1.bp.blogspot.com/-08OfKvSFgp8/T3BF_ifkYhI/AAAAAAAABTI/H-tCpPulBME/s1600/helperblogger.com-google-plus-icon.png"/>
   <div style="float:left;margin:10px 10px 10px 0;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
   </div>
  </div>
 </div>
 <div id="on">
  <div id="feedburner_right" style=" top: 69%;">
   <div id="knfeedburner_div">
    <center>
    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="hblogger" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><img id="feedburner_right_img" src="http://2.bp.blogspot.com/-92lVWafnEt0/T3BGAWfGPKI/AAAAAAAABTQ/r61lpGWJqew/s1600/helperblogger.com-subscribe-icon.png"/>
   </div>
  </div>
 </div>
</div>


  • Now replace btsnts with your facebook fanpage username.
  • Replace helperblogger with your twitter username.
  • Replace hblogger with your feedburner username.

Post a Comment

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I must thank you for producing such short and crisp tutorials which will benefit a large number of blogger community.

      Delete
    2. I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again..

      Delete
    3. I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again..

      Delete
  2. Hi

    Please can youu help me. I have followed exactly your instructions above, however, I still don't have the widgets slider? It take me to the place where you choose the blog (my blog) Where I want it adding but in the edit content box it says something must be in there and won't accept it add widget? can you help? i'm so frustrated and don't know why? Thanks Claire

    ReplyDelete
    Replies
    1. Hey Claire, add the widget directly from Layout of your blog. Select HTML/Java Script and paste the code. Replace the values and save it. I've added these widgets. Check here SupportiveHands-Helping Internet Newbies

      Delete
  3. This widget is just fantastic! I had some trouble getting the widget generator to work, but I was able to change the code before adding it to my blog. Thank you so so much for this!

    ReplyDelete
  4. But dude where is the Google plus Button.

    ReplyDelete
    Replies
    1. I can't understand your problem ???? Google plus +1 button is present in the widget.Pls check again.I have checked my widget generator and it is working...

      Delete
    2. he is relly taking about the follow booton

      Delete
  5. i tried several times, its easy and really fantastic but even after i enter my url & username in the generator's fill up, my blog is always updated with helper blogger's gadget instead of my links.

    ReplyDelete
    Replies
    1. Thank you very much.There was a small error in the script and I have fixed it.Also sorry about that :(. You can try now it will work 100%.Enjoy... :)

      Delete
  6. it is added on my blog ,but it does not work ,
    says check href
    please help

    ReplyDelete
  7. @JD Prathmesh - In widget generator only type usernames,not all the URL of your profile.My code and widget generator are working correctly.Please try again...

    ReplyDelete
  8. its now working can you fix it

    ReplyDelete
    Replies
    1. Not Or Now ???? If not then what is the problem????

      Delete
    2. sorry i mean its not working i cant see the code box can you paste here or send 2 me by email , i relay need it , thanks to you , its a lot of good info for blogger , iam waiting 4 ur replay thanks

      Delete
    3. I have updated my code.Please check the post again...

      Delete
  9. thanks i can see the code now but its not working with me http://samyqaid.blogspot.com i test in my test blog and i found the Facebook box and twitter box don't open can you fix it plz ,thanks 4 ur time

    ReplyDelete
  10. ok its working now thanks 2 much i was relay wanted, i need you 2 look 2 my blog if it need any thing 2 be more pro look http://semsam.blogspot.com/

    ReplyDelete
  11. @Sammi - Just visited to your blog it is really nice also the CSS3 drop down matches perfectly with your blog.There is a small problem in this widget to fix it find below code in your widget code

    #knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 25px;
    margin-left: -4px;
    }

    and replace it with below code

    #knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;
    }

    Now save your changes and you are done.Also thanks for informing me about widget generator so that I can give you code.

    ReplyDelete
    Replies
    1. @Rahul Ippar i think i fix now and make few change and thanks for ur visit http://semsam.blogspot.com/ thanks

      Delete
  12. Thank you so much for that great tool. Before I am going to put it on my blog I have two questions.
    I don't work with twitter and Google+. Is it possible to remove that.
    Is it possible to put subscribe to YouTube?

    Thank you

    Birgit from Germany.

    ReplyDelete
    Replies
    1. You can edit this widget as you wish...

      Use our HTML Editor to see a live preview of your widget

      http://editor-btsnts.blogspot.com/

      Delete
  13. I have followed the instructions and have the 4 in 1. But have realised that my feedburner is not working properly since adding the 4 in 1. Is there something else I need to do? How can I repair my feedburner? Thanks in advanceµ.

    ReplyDelete
    Replies
    1. @Claire - Can I see any demo or screenshot?

      Delete
    2. Hello @Rahul, yes, how do I send you a screenshot, as I can't send it on here. So basically, I'm in feedburner and then I click to see my feedburner page and a grey box appears saying that feedburner is asking for my username and password, I input the ones I know take me into feedburner but they don't work. And also the feedburner counter at the bottom of my blog page has not been counting? PLEASE HELP, I really don't know what to so and read that it can happen after plugins are added?

      Delete
    3. @Claire - Provide me your facebook,twitter and feedburner's usernames.I will send you working code.Use contact form...

      http://btsnts.blogspot.com/p/contact-us_22.html

      Delete
    4. Thank you I have sent you the details.

      Delete
  14. Hi, I am having a problem with the feedburner section... "The feed does not have subscriptions by email enabled" - Feed is enabled because my original "social box" [Still present on site] is fully functional. Care to take a look and see why it's not working? :)
    www.bermudaquest.com

    ReplyDelete
    Replies
    1. Never mind I fixed it... you're widget generator added by twitter username instead of my feedburner ID...

      I've written in CAPS where the error was is the following code [tags have been removed din order to post]:

      input value="TWITTER ID WAS HERE INSTEAD OF FEEDBURNER ID" name="uri" type="hidden"

      [the code following]

      input value="Submit" class="submitbutton" type="submit" /
      /form
      /center
      img id="feedburner_right_img" src="http://2.bp.blogspot.com/-92lVWafnEt0/T3BGAWfGPKI/AAAAAAAABTQ/r61lpGWJqew/s1600/helperblogger.com-subscribe-icon.png" /
      /div
      /div
      /div
      /div

      Delete
    2. Thanks bro for informing me,I have fixed my mistake :)

      Delete
  15. can we add show.amung.us tab in this widget ??
    it would be gr8 if you help adding show.amung.us tab

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I just visited to your blog and noticed that the widget is working fine,but you have to enable your feeds first.To enable feeds folloe simple steps -

      1.Go to http://feedburner.google.com
      2.Login with your account
      3.Click on Publicize tab
      3.In left menu click on Email Subscriptions and you are done.

      Delete
  17. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hey Google + is also working,check below image for proof,

      http://2.bp.blogspot.com/-mZLEsdZH89Q/UBJJbRfG92I/AAAAAAAACtc/1uffbTp_fDE/s1600/ravi-kumar.jpg

      Delete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Hi..........

    4 in 1 do not work properly in mozila (subscription option)

    and

    my face tab is not working

    pls help
    http://ravikkumar569.blogspot.in/

    ReplyDelete
  20. Hi it is very useful gadget but when i installed it there is an error plz see my blogspot page menu

    http://premium-downloadz.blogspot.com/

    ReplyDelete
  21. the twitter post is unaivalable see it, www.fobbleup.blogspot.com

    ReplyDelete
  22. hello pal, the twitter post is emply on scrolling help me out..

    ReplyDelete
  23. hello pal, the twitter post is empty on scrolling help me out.. reply me soon

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. hi my facebook option is not working pls help http://ravikkumar569.blogspot.in/

    ReplyDelete
  26. hi my facebook is not working pls help

    i try the following facebok fanpage username

    1.ravikumar569/friends?ft_ref=mni
    2.ravikumar569

    but still facebook button is not working

    u can check on the following link

    http://ravikkumar569.blogspot.in/

    ReplyDelete
  27. Nice post, thank you.. The widgets are beautiful and saved my space also..

    ReplyDelete
  28. I must confess, it works like a spell.thanks dude!kudos!

    ReplyDelete
  29. thanks veryyyyyyyyyyyyy much i am finding for this widget from many days this site is the best in the world

    ReplyDelete
  30. Thank you so much for sharing your established site.I will probably return to your blog a lot more than you so soon.Thank.
    DVD printing

    ReplyDelete
  31. Thank you so much for sharing your established site.I will probably return to your blog a lot more than you so soon.Thank.
    http://www.summittechnology.com.au
    DVD printing

    ReplyDelete
  32. Hi
    Nice blog Post
    I have Used This Code After Copying From Here
    Friends Check Out
    Pak India fashion styles Provides Updates On Fashion In Pakistan & India.
    http://pakindiafash.blogspot.com

    ReplyDelete
  33. Hi Rahul,

    I'm trying to add the code to my website (www.hiasfuk.com) and it won't work. Any help?

    Thank you.

    ReplyDelete
  34. It doesn't work for me.
    My facebook function is broken like this
    http://baronet-j.blogspot.com/
    Could u help me to check it ?
    btw, may i use my facebook account instead of fan page account?
    thx.

    James

    ReplyDelete
  35. This is a real scoop for everybody. This is an interesting blog page. I do hope you could do some more post. Good job!
    DVD duplication

    ReplyDelete
  36. i need to change position to bottom how can i do?

    ReplyDelete
  37. Hey! I love this widget, however just not too long ago the twitter box became blank. Any suggestions?

    ReplyDelete
  38. Hi , great site! I want to ask you if there is a way to add a sidebar like this on blogger , but only with facebook and google plus buttons. Is that possible? I dont have twitter and the other one. Could you help me please? Thanks

    ReplyDelete
  39. IDM 6.21 build 19 included patch
    http://akkihub.blogspot.com/2015/01/internet-download-manager-621-build-19.html

    ReplyDelete
  40. Please my twiiter is not showing what do i do www.casperjoeproduction.com

    ReplyDelete
  41. Interesting news. Thank you providing this info. Thank you bro, for this awesome post. I love to read everything about Android :) Blackmart Alpha Apk social-subscribing-slide-out.html

    ReplyDelete
  42. great post is shared here very useful for my blog http://www.allrajasthan.com

    ReplyDelete
  43. This comment has been removed by the author.

    ReplyDelete
  44. This comment has been removed by the author.

    ReplyDelete
  45. This comment has been removed by the author.

    ReplyDelete
  46. I am add social slide already but my twitter can not show. I replace with my username already too. don't know why? Can you help me?
    here is my blogger: http://ecomputerss.blogspot.com/

    ReplyDelete
  47. Nice post admin, thanks for sharing www.apktub.com

    ReplyDelete
  48. good
    Lê Minh – Nhân viên chăm sóc khách hàng
    ------------------------------------------------
    Trang trí cưới hỏi
    Trang tri cuoi hoi

    ReplyDelete
  49. This comment has been removed by the author.

    ReplyDelete
  50. Learn how to make a blogger blog.
    http://trickzbucket.blogspot.com/2015/03/how-to-create-blog-in-bloggercom.html

    ReplyDelete
  51. Really nice widget thanks for sharing dear admin
    Blogging Tips

    ReplyDelete
  52. Hi Admin,

    for me twitter botton showing empty. please help me here :

    https://marthadba.blogspot.com

    ReplyDelete
  53. Hi Admin,

    for me twitter botton showing empty. please help me here :

    https://marthadba.blogspot.com

    ReplyDelete
  54. Hey its an excellent widget but somehow my Twitter is blank, it doesn't seem to be working, here is my blog link for your reference www.ikreatepassions.blogspot.in, would be grateful if you can help

    ReplyDelete
  55. Hi, thanks.. but the twitter didnt works.. i already replace my username but not display..
    https://mamatriplets.blogspot.my

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top