Social Networking Auto Slide Out Widget

Social Networking Auto Slide Out Widget

6
data:blog.title
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.

<style>
#bsslideout{background: rgb(4, 82, 102) url(http://4.bp.blogspot.com/-ZDTaebubNZ0/UYjGUng3yQI/AAAAAAAACxo/ImRz3I0coQU/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
Social Networking Auto Slide Out Widget
4 Stars stars - "Social Networking Auto Slide Out Widget " This widget is designed with auto slide out option which will represent your Facebook and Tw...

Post a Comment

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

thanks bro that u like it..

really cool widget awesome work brother keep it up.

awesome widget,,supper

Thanks for your feedback.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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

Name

Email *

Message *