Add 3 in 1 Slide out Followers Box widget in Blogger

3 in 1 Slide Out Followers box widget: Did you want to increase your followers throughout the social media hub? If yes, then 3 in 1 Slide out box widget is the best way for increasing your blog followers. Actually by adding this widget three Top social media boxes is added to the right side of your blog which slides out when someone hover over it. These contains the following social media boxes.
1) Facebook Slide out box.
2) Twitter Slide out box.
3) Google Plus slide out box.

LIVE DEMO

How To Add 3 in 1 Slide out Followers Box widget in Blogger

• First of all Visit Blogger Dashboard.
• Then go to your site.
• Now click on layout, then Add a Gadget link.
• A list of gadgets will appear, select the HTML JavaScript gadget from that lists of gadget.
• Now copy the below code and paste it inside the HTML JavaScript gadget 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: 12%;">      <div id="facebook_div">        <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjStqwbvQgkDzJuz0D8v7UsND1Aa67BEjgBxJ_R5I1tGgWD4Y8NHdKEKY8fdrPiiX38od77YYU4rovi3K-KyfINg5_gpUWTtKd8HFQLr-6xPWz5A9JrXe6f_UwJFLjBuiUQmQIED4z_ECE3/s1600/NBTfacebook_right.png" />        <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Trickspunch/1397531987130417?ref=hl&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/AVvXsEjzjYoE-ykDE59l2vWQUOBNxrH17QALDOV5mGjQAMMmcOlM8fsRox4X3mZAyO3AVLcOOx9t0EUECUk_B6_hZhqCUzIqGEr4fJ2oqce44MoAj5gjQojLwrtknp_bYkmRXuByURy5M127kdaf/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=trickspunch&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script><a href="http://www.trickspunch.blogspot.com" 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/AVvXsEhOdprQqU6lSA_p6_0Utf0RhPjQ0J8xxOfuZZtWLdet6fGLRZypg5US-HhWB3kHMHpLXGF9gD_TfBDV6g9Eq0NJjK4joIDsc2-5evWich-sT2-ol48WMoANWcmHA93Yjgq0tIYQ-VeEkEs/s1600/NBTgoogle_plus_right.png" />          <div style="float: left; margin: 10px 10px 10px 0;">            <a href='http://www.trickspunch.blogspot.com'>              <img alt='Blogging Tips and Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcxcRcvmVpXw577N-Gsj_ChP77s22DPCwA8aGTsQXkV1Z16Y2W4FADHD5i0V6BErhipbBtUXXp8FzcB8peIhyItWR1jseEEDAqiD_L-tvRo5wiLZR6VToqFwVrhwzVYFlQ3vak_gYTrcqq/s1600/best+blogger+tips.png' />            </a>            <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/104997427310964791620" 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>

Customization Before Saving:

Make sure you made the following changes in the script:

1. Replace the URL in green with your Google Plus ID URL.
2. Replace the URL in Blue with your Twitter username.
3. Replace the URL in red color with your Facebook ID URL or Fan page URL.

• Now click on the Save gadget button and Enjoy!!

Also Read:

How to add Floating Facebook Like box widget to Blogger.

How to add Facebook like box to blogger.

If you find any problems while doing this Tutorial ask us through the comment box, we will resolve your problems if we can!!