Floating Social Box cho Blogger

Floating Social Box for Blogger

Tiếp tục là một social widget khác, tiện ích lần này sẽ xuất hiện mỗi khi khách truy cập tải trang và sẽ trượt theo website khi cuộn trang. Tiện ích này gồm có 2 phần, một là hộp like fanpage facebook và hai là nút follow trên Twitter. Trông khá đẹp phải không nào :))

Cách thực hiện

1Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán vào đoạn code sau

<style type='text/css'>
#iris-facebook{position:fixed!important;position:absolute;bottom:-1000px;right:40%;margin:0 0 0 -182px;width:310px;height:auto;padding:16px;-webkit-box-shadow:0 0 7px #222;-moz-box-shadow:0 0 7px #222;box-shadow:0 0 7px #222;background-color:#FFFFFF;font:normal 1em Cambria,Georgia,Serif;color:#111;-webkit-border-top-left-radius:20px;-webkit-border-bottom-right-radius:20px;-moz-border-radius-topleft:20px;-moz-border-radius-bottomright:20px;border-top-left-radius:20px;border-bottom-right-radius:20px}
#iris-facebook a.close{position:absolute;top:-10px;right:-10px;background:#333;font:bold 16px Arial,Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#fff;border:2px solid #fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);box-shadow:0 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;cursor:pointer}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
$('#iris-facebook').animate({bottom:"50px"}, 1000);
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='iris-facebook'>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Iris-Tips/914163981938548&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:220px;" allowtransparency="true"></iframe>
<div style="text-align: center;">

Follow us on Twitter:
<a href="https://twitter.com/Iris_Tips" class="twitter-follow-button" data-show-count="true">Follow @Iris_Tips</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<a class='close' href='#'>&times;</a>
<div class='clear'></div>

• DEMO

Chỉnh sửa các thông số cho phù hợp với website của bạn nhé.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm