Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

Add Facebook, Twitter, Google +, Youtube, RSS Feed Slide/Pop Out Widget To Your Blog/Site

After a little break, i think i should come back with something unique, so i will will be sharing with how you can add a five different social media widget to your blog/site. This widget comprises of facebook like box, twitter follower box, Google plus, Youtube and RSS feed subscribe box, and this widget will slide out smoothly when you place your cursor on any of the widget, due to the jQuery effect that is included.
Follow the simple procedure below on how you can use this five stylish widgets to spice up your blog/site.


How To Add The Widget To Your Blog

  • Login to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Use ctrl F to find </head> and paste the following code above/before </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<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: -249}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 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: -323}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 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); });
Update: 16/09/2012
Please, those of you having problem with google plus, i have got the problem fixed, kindly recopy the code in STEP 2, and sorry for any inconvenience this may have caused you. Thanks!

  • Go to "Design" > "Page Elements" > "Add a Gadget"
  • Choose "HTML/JavaScript" from the list of the gadget that appear in the pop-up window
  • Copy and paste the code below in the content box leaving the title box blank.
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:245px;height: 260px;overflow: hidden;}
#twitter_div {width:260px;height: 238px;overflow: hidden;}
#google_plus_div {width:320px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#youtube_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}
#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:260px;height: 238px;position: fixed;right: -264px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:320px;height: 143px;position: fixed;right: -323px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10002;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 100px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10001;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;}
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="http://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FRealcomBiz&amp;locale=en_GB&amp;width=245&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=260" scrolling="no"></iframe>
<div id="on">
<div id="twitter_right" style="top: 25%;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.png" />
<script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("RealcomBiz");</script>
<div id="on">
 <div id="google_plus_right" style="top: 42%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/hxB7RBjWk68/s1600/Google+Plus.png"/>
   <div style="float:left;margin:1px 0px 0px 2px;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="http://1.bp.blogspot.com/-NCdhprqaK10/T0BfYEMH7VI/AAAAAAAABQ8/hn0n3XoKq2Q/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=RealcomBiz style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<h4 style="color:#F66303;">Subscribe And Get Free E-Mail 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=realcombiz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter Your E-Mail Here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your E-Mail Here...&#39;;}" onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="RealcomBiz" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
<img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k-3C-8kdREI/Tyyw0ao_FII/AAAAAAAABM4/mMDgy0TFiD4/s1600/Subscribe.png" />
  • Replace RealcomBiz with your facebook fan page username
  • Replace RealcomBiz with your twitter username
  • Replace RealcomBiz with your youtube username
  • Replace http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz with your feedburner url
  • Replace Realcombiz with your feedburner username
  • Click "Save" when you are through with your editing
Similar articles which you may like
That's all on how to add a 5 stylish social slide out widget to your blog/site and if you enjoy this article, take few seconds to share it and subscribe to this blog now for you to stay updated with our latest articles via email.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

53 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. TEngo problemas en la parte del facebook y el G+. He remplazado la seccion indicada con la url de mi perfil en facebook, sin la url y solamente con el username y nada que funciona. Igual pasa con el ID de G+. Tengo bastante tiempo con la cuenta de googleplus pero nada de nada. cualquier sugerencia te lo agradeceria.

    1. Replace only ''Realcombiz'' with your facebook fanpage username and for the google plus, it works with there old profile, but am still working on a fix for it, i will keep you updated when am done.

    2. I have read your blog its very attractive and impressive. I like it your blog.

      Social Media Marketing Agency Social Media Marketing Services

  2. I want to add this gadget to left side plz help me what to do ?

  3. bro, itz not working nd olso nt removing plz give me ans how 2 remove it
    my blog - http://pctrickery.blogspot.com/

    1. It means you have made a mistake somewhere, is it not showing at all? Try and restore your backup and try again.

  4. This comment has been removed by the author.

  5. Hi Ridwan,
    I think i will use into my site
    thank before for share and I like its

  6. what if i dont want youtube? i want only the rest 4, alos can u plz tell me insted if google +1 if i want google followers there then what to do?


  7. Hi,

    Nice one. I would like to add it to my website. Can you please tell me which files to edit. Its an opencart site

  8. Super fantastic! I appreciate it. Social media marketing is always evolving, and Pinterest was just an idea a year and a half ago. Just focus on getting the key pillars down and you should have a good framework for understanding and utilizing social media for your business. Cheers!
    visit me...

  9. The twitter slider is still blue, the content cannot be seen...

    Check the issues in my site-

  10. this one works for my blog, others don't i think manual copy and pasting codes does it, you are good on it, just one question, why does the twitter only shows a blue box ?

    anyways thanks a lot

  11. This comment has been removed by a blog administrator.

  12. This comment has been removed by a blog administrator.

  13. This comment has been removed by a blog administrator.

  14. This comment has been removed by a blog administrator.

  15. Highly descriptive article. Everything is very open with a really clear explanation of
    the challenges. It was really informative. Your website
    is very useful. Thank you for sharing!
    website design

  16. twitter slider still shows blank blue .its not working even though I changed it into my own user name.

  17. This comment has been removed by a blog administrator.

  18. This is an awesome widget. But I wanted to use this widget to pop up on my blogger. Can you help how to pop up this widget, if possible with timer.
    Blogger Tips and Tricks

  19. Great post. This article is really very interesting and enjoyable. I think its must be helpful and informative for us. Thanks for sharing your nice post. i am Google plus provider . I am selling those service on, please take a look Buy Google plus Followers

  20. Wow amazing widget. I will add it on my blog. Now my blog look great. Thanks buddy for that great tutorials

  21. Just saying thanks wouldn’t just be enough, for the fantastic fluency in your writing.Six Forty One

  22. This widget comprises of facebook like box, twitter follower box, Google plus, Youtube and RSS feed subscribe box, onpage analysis

  23. thjis is awsome post , twitter and google plus are not working

    plz guide

    thanks ranjit

    Website Design Patna
    Website Design Company in Patna

  24. Wow, Excellent post. This article is really very interesting and effective. I think its must be helpful for us. Thanks for sharing your informative. If you update your facebook account, please visit Buy Google plus Followers

  25. I am satisfied that you shared this helpful information with us. Please stay us up to date like this. Thanks for sharing. Buy Google Plus Share

  26. hello blogger,i really appreciate your highly thought about this matter through your post.Obviously your post is very informative.If you update your Social account, please visit buy facebook likes For facebook Service.

  27. Greetings dear,many many thanks for sharing such wonderful information with us.I am eagerly waiting for your next post.Kindly please visit buy real likes
    site for social information.

  28. I must admit I have popped in a read a good number of your blogs but I have no idea how to post a response over there, so I'll tell you now how good you are at describing the stuff your at - I must admit I find it insightful to read your blogging. Keep up the good work. If you want to know more about a sites, please visit our websitebuy twitter followers.

  29. I'll give you a pat on the back just for the sheer effort in screencapping all those blogs.Giving a blog talk to beginner bloggers in the not-too-distant future, I'll be pointing people in the direction of your efforts. Nicely put together dude.Here is our small effort about buy instagram followers

  30. Amazing post dude.It will be very helpful for begginers like me.Thank you very much for this important post.Waiting for your next post.You can visit our site also buy instagram likes

  31. Fantastic, I'm enjoyed read this post, Every time search this type of post. Really I enjoyed. This article is really very interesting and effective. I think its must be helpful for us. Thanks for sharing your informative. Buy Twitter Followers

  32. Hi,
    I am trying to implement this on squarespace. I have the widgets in place however they are not animating. Any ideas? Any help would be greatly appreciated. Thanks!

  33. Hi,
    I am trying to implement this on squarespace. I have the widgets in place however they are not animating. Any ideas? Any help would be greatly appreciated. Thanks!

  34. I constantly emailed this site post page to all my friends, because if prefer to read it then my all friends will too.
    buy likes

  35. Remarkable blog! I have no words to praise, it has really allured me. how much is my life insurance policy worth

    1. This is a very instructional blog post and definitely a bookmark. Also wanted to ask you all to visit our site about buy Instagram followers with credit card

  36. solidworks crack
    solidworks download
    solidworks tutorial
    learn solidworks online
    http://solidworkscrack.blogspot.com/2016/06/learn-solidworks-tutorials-online.html http://solidworkscrack.blogspot.com/2016/06/learn-solidworks-tutorials-online.html

  37. Thanks for your marvelous posting! I quite enjoyed reading it, you happen to be a great author. I will remember to bookmark your blog and will eventually come back very soon. Go to best social plan for get more related topic. Have a nice evening!

  38. f you’re seeing any success with visual marketing on how to get more likes on instagram the other platforms you use, imagine the capabilities you have on a site dedicated solely to visual marketing.


  39. The share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
    hotmail login | red ball


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger