How to add Facebook, Twitter and Google+ 3 in 1 Slide out Widget to your Blog

   Few weeks ago, I decided to add some more widgets and styling to my blog - StevenBergy.Com.Ng, in order to make it more professional and beautiful so I added some Blogger Widgets via NBT. Today, I will like to share with you one of the widgets I added to this blog and how I did it. This widget is the 3 in 1 Slide out Blogger Widget.
      

The 3 in1 Slide out Widget as it appears on Stevenbergy.Com.Ng

  This 3 in 1 Slide out Blogger Widget contains the 3 Biggest Social Networks so far in the Social Networking world namely Facebook, Twitter and Google Plus.

  This widget is very useful For Your Blog because it will help Increase your social fans and thereby build up a Social Audience filled up with peoples who are really interested in reading your updates. Once you install this widget on your blog, your visitors will be shown a slide out box with the option to like your Facebook FanPage, Follow you on Twitter and add you in there Google+ circle whenever they visit your blog.

NOTE - The Twitter Slide-Out part not showing error has been fixed. All the 3 Slide-Out are now working and displaying perfectly. Go ahead and add to your Blog.
 
Wow!!! I like this Widget, How will I add it to my Blog?

1. Login to Blogger > click on Layout.
 
2. And then click on Add a Gadget (wherever you want the widget to be) then scroll down and click on HTML/JavaScript Widget.

3. Now a new empty box opens, Paste the following codes into the box -  
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/m4krejz6tw6sxlf/3%20in%201%20StyleSheet.css" /> <script src="https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js"></script> <div id="on">    <div id="facebook_right" style="top: 11%;">      <div id="facebook_div">         <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXl_07_5_bIkRegNlrr3NvHhhNXMUzhxgG-juKIXyWmgRW1bG_lri600-gSTlrnBg7dCyuHoaaiRLEx6IW_8i9Xb5dp9Vys-DwYwiHMAXdfX3LaZ-y1k3T46gcscdRZimtJ12Yw6JOP87W/s1600/NBTfacebook_right.png" />         <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FStevenbergy&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe>      </div>    </div>  </div>  <div id="on">    <div id="twitter_right" style="top: 28%;">      <div id="twitter_div">        <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCgzPbsS33kL_p3UhBM9o0M0v9wM2KSbLKeo2cMIIrLhddawT1NcnCCzhPjMlH_wRTgJcDx3W4oi5rcG4DlOORzjygDxsXrv4fIDr944i9sflVYaAg0DtV7oquOFxTSv3CouZHIbuFmJsM/s1600/NBTtwitter_right.png" />  <div style="width:248px;font-size:8px;text-align:right;"><script type="text/javascript">  document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=Aywhy93&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script><a href="http://StevenBergy.Com.Ng" target="_blank"></a></div>        </div>      </div>    </div>    <div id="on">      <div id="google_plus_right" style="top: 45%;">        <div id="google_plus_div">          <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-vyakmjTU9dDL1jq_AE2HF0b_Qgr-mizlSpuIK5CD9MQs05_wHRKHPXUrm0tpssnZhMQphMLgPimONIolB4MFWIhgYXFwhWwaRnCwxTukKBzbd_poJZAeHTf__9FzLQ4ep4JFx-u1Nwg/s1600/NBTgoogle_plus_right.png" />          <div style="float: left; margin: 10px 10px 10px 0;">            <a href='http://stevenbergy.com.ng'>              <img alt='Android Tips and Download 2go' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bXRUeTn1MtD7o48tMBanNkDAv_AwCY4mCdWIxU6cEoQDf8vXqJNyPjhfbK_G3BMz1PdxnoO6Zb2kwLdG2XjA7I8DAvEebSl_-ejLGwtxzVje-wwx7pTWY-s5UPP2ZxlM1xkiULJyJ8tz/s1600/best+blogger+tips.png' />            </a>            <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/100050778975599172949" data-source="blogger:blog:followers" data-width="270"></div>            <script type="text/javascript">            (function () {              window.___gcfg = {                'lang': 'en'              };              var po = document.createElement('script');              po.type = 'text/javascript';              po.async = true;              po.src = 'https://apis.google.com/js/plusone.js';              var s = document.getElementsByTagName('script')[0];              s.parentNode.insertBefore(po, s);            })();            </script>          </div>        </div>      </div></div>
 
4. But note that you have to make the following changes to the code you copied so that you wont be displaying my Social profiles on your Blog.. LoL

• Replace Stevenbergy with your own Facebook Fanpage ID
• Replace Aywhy93 with your Twitter User ID without @
• Replace https://plus.google.com/100050778975599172949 with your Google+ profile URL.

5.  Now, click on Save and you will see the newly installed 3 in 1 Slide out Blogger Widget on your Blog.
 
   What do you think about this Widget? Do you have any problem while adding it to your Blog? Feel free to use the comment box provided below in case you have any question, suggestion, contribution or opinion about it and don't forget to share this interesting post with your friends.