0 Social Networking Auto Slide Out Widget

This widget is designed with auto slide out option which will represent your Facebook and Twitter Fan Page links with number of Facebook likes and Twitter Followers. Whenever a visitors will scroll down to bottom of your blog then this widget will appear. It is also very effective to increase your Facebook and Twitter fans. If you want to see the demo then visit the below link but you have to scroll down the demo site.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style>
#bsslideout{background: rgb(4, 82, 102) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBjQsZ3f0e5xBBGPCejJ5p2RC_DicK2Wg8wVOL704hHqqX83O_2AIoPlLkVWj6zA8Q7GbspA47X9ZS3fh6sVRZYkByOPIseJ6KYa1fgT8XEDx8O1d1YdOktdtat7mv33eLbqN-LFWpLri/s1600/BS+Slidesocial.png) left top repeat-x;
border-radius:9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #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;
}
<!--www.bloggerspice.com-->
</style>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#bsslideout").show("slow");else $("#bsslideout").hide("slow");});function closebsslideout(){$('#bsslideout').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="bsslideout">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closebsslideout();">(X)</a>
<span style="font-family:Trebuchet MS; font-size:18px; margin: 10px 0; text-shadow: 1px 1px 0 #F7F7F7;">Feel Free To Join our community!</span><br/>
<div class='clear'></div>
<div style="float:left; margin:15px;">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FBloggerSpice&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;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/BloggerSpice" 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>

Customization

• Replace BloggerSpice with your Facebook and Twitter ID