Add Facebook, Twitter, Google Pop Out Widget

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/AVvXsEidW0qpUC2STdIWlKXyUznu6dZIqoHgWcB1c9693WHtgU2vSTHCWEDz5jCOC_TRec2b8uyV-eWAO76kMyo4I_oNEDEzWR-uHDL1jl5E_Ylu6CEEa-VtbumS2DaogK2ZYS0EPtUACnUdLQ/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/AVvXsEg8WzFyFOr67e6YkmVWpZScBqZH2MBRCeV4ztxFYtoXfRByZ1-pmt0wnuWoArnd7zwIyynINAvwUWxfN96Wbbszu4icgetrk-GjQr6OlPvIN5mOcNCb_a3i7n8i067XLxtDpl5qyPLtuQ/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/AVvXsEjmFAjj5DpoTyWaelUmINei0I4SaeEeLQSuWqmm21XJOS8ouwetfzN9bnuzuHt_5ybw1jeCTqmvMwTwragVzOuR4C7gVYD18UkHEMxJSEJMmrrHS88ekIDcrb7po5ughAsdCeQ4FLiEsQ/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/AVvXsEi65pfWpZ0P3OKWZp5nR0v18-Xfrs-foOgvTYeiFKwupNY2tbWqU_ccstLhhA_SjMuAWqeiffuKL7deZLHu91zfLVR6cxYTQHhCD0hpEyLkbibJO5hCNF3PjOuO-QxBcG4yffCMoUSJgw/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/AVvXsEh5CKY9zJg9FzIHD149pU-mpc_ywi347zIiSiGt4G-D399-CsugtgdKjZsqXQzgyMOb78xa_hU3N5ozdEbF7OqNDDM_oZSf30X6hMsw0Duk80n2ZTHw095_Wn5lJ4cF-JLicRbrruYA2Q/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