Own A Blog Like This
For Questions, Inquiries, Click Here
Page | Group - Follow us - Call us - Hire Us - info@howtosguide.com
Join Howtosguide - Telegram Group Today!

Sunday, 30 October 2016

How to add Facebook, Twitter and Google+ Slide out Widget To Your Blog

Few weeks ago, I decided to add some more widgets and styling to my blog, in order to make it more professional and beautiful so I added some Blogger Widgets. Today, I will like to share with you one of the widget named, "the 3 in 1 Slide out Blogger Widget".

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.

Read Also: How To Add Floating 5 in 1 Share Buttons to your Blog and increase your Blog Traffic

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="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/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%2FBenson&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="http://3.bp.blogspot.com/-UrPbwWyd88E/UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/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=Benson&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="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/IIkUjVUrtus/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='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/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> 

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



  1. nice one bro i also run one and i'll really need your help check this it out ddcryptonews.com.thanks


Designed by Chivalry Benson