Social Networking Auto Slide Out Widget

Social Networking Auto Slide Out Widget

Comments: 6
social media

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.

#bsslideout{background: rgb(4, 82, 102) url( left top repeat-x;
-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;
right: 2px;
display: none;
z-index: 3;
height: 65px;
<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="//;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="" 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.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></div>


  • Replace BloggerSpice with your Facebook and Twitter ID

Related Post

Speak Your Mind

Ankit Kumar Singla says: 5/09/2013

This gadget is really cool. It works awesomely to increase social shares. Great sharing buddy!

Mohammad Fazle Rabbi says: 5/09/2013

thanks bro that u like it..

shakeel asghar says: 5/12/2013

really cool widget awesome work brother keep it up.

Mohammad Fazle Rabbi says: 5/12/2013

thanks bro

Rashedul Islam says: 3/18/2014

awesome widget,,supper

Mohammad Fazle Rabbi says: 3/18/2014

Thanks for your feedback.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *