<style>
#socialslide{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85PAXIqJZ8eTDkglwqUIakjABhxav181kdtXbyudNZBFej-MzgIHNH2cz6C8gfDcB3g1Sha6PwpXK96xoSdRV4mn5GpS8wOQM6fmoXMJUnUC5Uk7YTqGtswsakF51zzzg0XC2vGeCXh8/s1600/recbg-btrix.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: 250px;
position: fixed;
bottom: 13px;
left: 2px;
display: none;
z-index: 3;
height: 75px;
}
</style>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/10)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#socialslide').remove();}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:11px;right:10px;color:#fff;font-size:14px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();"> (x) </a>
<span style="font-family: arial; font-size: 16px; margin: 10px 0; color:#fff;">Hãy like website nhé!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=LINKPAGEFACEBOOK&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>
<div class='clear'></div>
DEMO
#socialslide{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85PAXIqJZ8eTDkglwqUIakjABhxav181kdtXbyudNZBFej-MzgIHNH2cz6C8gfDcB3g1Sha6PwpXK96xoSdRV4mn5GpS8wOQM6fmoXMJUnUC5Uk7YTqGtswsakF51zzzg0XC2vGeCXh8/s1600/recbg-btrix.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: 250px;
position: fixed;
bottom: 13px;
left: 2px;
display: none;
z-index: 3;
height: 75px;
}
</style>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/10)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#socialslide').remove();}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:11px;right:10px;color:#fff;font-size:14px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();"> (x) </a>
<span style="font-family: arial; font-size: 16px; margin: 10px 0; color:#fff;">Hãy like website nhé!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=LINKPAGEFACEBOOK&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>
<div class='clear'></div>
ConversionConversion EmoticonEmoticon