Stylish Slide Out Don't Forget To Join Our Community Widget For Blogger

Hi friends, Today i am here again with a wonderful widget that can increase your blog likes and make your blog look more attractive. Mainly this widget contains two buttons one is "Facebook like button" and other is "Twitter follow button" and this widget slides out whenever you scroll down. You can see this widget on one of my blog by clicking the demo link below.

Live Demo

This widget works smoothly and hence not look awkward, i am providing this widget with various color schemes and therefore it will easily merge with your blog template without affecting your blogs look. You can add this widget to your blog by following the easy steps given below :

• Log in to your Blogger Account.
• Go to Dashboard >> Layout >> Add a Gadget.
• And paste the below code in add a gadget content box.
• Then click on Save tab and you are done.

If you want this widget to appear on left side of your blog then simply use this code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type='text/css'>  #IGsocialslide{  background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrIJADyZKPUk-C5J10nWcAx5l-e0H7Sbr9rHlkBdjRogxhtFR4UBRSBAVxCU5j5o2bNVcpKLRv4q3c9L6D1fJZZPtyoOTLfIJD5B2QKxtv4ZPXrmlr9441Uhdys62wLa8IRdMT1FuStA/s1600/blue.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fthebravesandsmarts&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>   <div style="float:left; margin:15px;"><a href="https://twitter.com/TheBrvsAndSmrts" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class='clear'></div>  

If you want this widget to appear on the right side of your blog then use this code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type='text/css'>  #IGsocialslide{  background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrIJADyZKPUk-C5J10nWcAx5l-e0H7Sbr9rHlkBdjRogxhtFR4UBRSBAVxCU5j5o2bNVcpKLRv4q3c9L6D1fJZZPtyoOTLfIJD5B2QKxtv4ZPXrmlr9441Uhdys62wLa8IRdMT1FuStA/s1600/blue.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  right:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fthebravesandsmarts&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>   <div style="float:left; margin:15px;"><a href="https://twitter.com/TheBrvsAndSmrts" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class='clear'></div>  </div>

Customizations:

• To change the color of the widget replace the image url shown in red with any of the image URL given below.
• Replace the name in green with your Facebook fan page name.

Note: you have to use the name as in your fan page URL.

For example:  https://www.facebook.com/thebravesandsmarts

• Replace the name in blue with your Twitter name.

Color Schemes: 

Blue:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrIJADyZKPUk-C5J10nWcAx5l-e0H7Sbr9rHlkBdjRogxhtFR4UBRSBAVxCU5j5o2bNVcpKLRv4q3c9L6D1fJZZPtyoOTLfIJD5B2QKxtv4ZPXrmlr9441Uhdys62wLa8IRdMT1FuStA/s1600/blue.png

Green:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9b10kuIalMG8FbCKREfOF1puFTT10EI-f_iOZny7_ZRbC8CmZ3xtLTKE3BKN9gSedPcTJ9sdbf6MGqRbE5NFyVU5karFCzKr_4-quD_TkYx6jN7ynJS31en3ededRG1Eub_YGWyeKFaA/s1600/green.png

Red:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5mKi_Z-1-kc_LQqduqoQjDP0D77LJNha-vHUryt6PACA3IzFvBDfQwcB048HtB9dl4m4UHCQdo_KSdzWBG8FpiIHvY8JP_dmAxnChZcpuL4Rcc0yuHJgGfK-iDG1sOEHs-NPs0LIf3hU/s1600/red.png

Brown:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZZ0nmexxvM7RoDH5liDbha9qlcAqWHdCDLbWWsdiFZtC9U0wG0njvWd8lBVsk8gDphGkW91LaUeh0XtyG4CRQQTGlTIA82e-CuRo9AbPdU2kFHN5O0qH9C2gQ8bDyOz5njnhHc6vii4/s1600/brown.png

Ash:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr81hIGjKk32Ig_b47BQboDWWpqlY7lrZKborqiPEXp8BHcBIgM0FBJE-1xEFTnn28qrgHFaZmCkMIcvB_KIVD90QXMC1niX6XWhtwQPXtd2VqDXASucqtVnnpFF6j9WJOA8Ou6ApBmDg/s1600/ash.png

Pink:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7v8DX7Sef6E2DqkZViuY141Gq1NUhaJS_TQu8hG31NIREfWR2bEKavKtip3iIOiY32BDo1t8ALrOaHiRCwUjaBAXSG6VJU4dPBCychebrqMx81NCyuotOIxp9tLXE_KnpgBcriM7dPA/s1600/pink.png

Also read:

• Professional subscription widget for Blogger (Recommended)
• How to create a cool Multilevel Drop Down Menu in Blogger?