Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
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

STEP 1
  • 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); });
});
</script>
  • Click "SAVE TEMPLATE"
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!

STEP 2
  • 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.
<style>
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;}
</style>
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_rCJjakTK2oa-hZZDqN9o8iiYbu8z-lJmWCIoHskYtV0zzL0OxgbA0W6UORUcIbuRkv39da1Wp4QG4BLu2sUCY6rxktx76gJrpuPW40e9E1NSUTlHKN4r4uXSGUrr52XlilFRLmYlA/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>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 25%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNgxPWE_3cpuwGl0gQbNhubqycd9-4312GycsniLtl5GYM22MFbvl9j_ILHSe78Bw72FPy9K6zMe5wKfOgcZ06p1rjHgTM3psIvaNcjsNv_50iYGWtoicx26T-ADZsafgXEDGomSeIrg/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>
</div>
</div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 42%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZjMAgtLjg12vkQmkHUgDENmle5rMW1AMGiFCo-cDpRFvvpvtgzk51vZevXOeBPeyDEqZRfn4AO6-y17Y8nazKXo2Mi6c7jqojJzrRWfKxaD3g7XEnF0I_fz7dIFudCjefbMAfeR13w/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>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihWpyE43Op273kfasDnJ_bz2R-3CIRRbQLrMyxtY9BHx8a2KIsRVOOT2UWTrude9fYJIfO-JsGFrXHESCUQKY33wypoMZxB1vI9qyZ9ZmWpuwHDnpao10hlC03aQCu76KK0DvtrDqjcg/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>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<center><br/>
<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>
</center>
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipnXEAAMZQ3zmts3HD_negSBctc7JUXvt6kG3DnwxAYMTOzzs95x4rRe2isIcchzRdiLgJX6T1hKiEYit5Zyaoa9IdDK2yu1r00NUbUMsccWCbDQH45w6krXqMCDOLiTu3zx7hwqTypQ/s1600/Subscribe.png" />
</div>
</div>
</div>
  • 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!".

43 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
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.

    ReplyDelete
    Replies
    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.

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

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

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

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





    ReplyDelete
  5. 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?

    http://ultimatesqs.blogspot.in/

    ReplyDelete
  6. 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

    ReplyDelete
  7. 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...

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

    Check the issues in my site-
    http://androidappsandgameshacking.blogspot.com/

    ReplyDelete
  9. 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

    ReplyDelete
  10. This comment has been removed by a blog administrator.

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

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

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

    ReplyDelete
  14. 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

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

    ReplyDelete
  16. confirm that; twitter slider still shows blank blue.

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

    ReplyDelete
  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

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

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

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

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

    plz guide

    thanks ranjit

    Website Design Patna
    Website Design Company in Patna

    ReplyDelete
  23. 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

    ReplyDelete
  24. 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

    ReplyDelete
  25. 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.

    ReplyDelete
  26. 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.

    ReplyDelete
  27. 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

    ReplyDelete
  28. 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

    ReplyDelete
  29. 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!

    ReplyDelete
  30. 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!

    ReplyDelete
  31. 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

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

    ReplyDelete
    Replies
    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

      Delete
  33. 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.

    ReplyDelete

  34. 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

    ReplyDelete

Recent Posts

Let's Connect

Site Links

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