2013-11-27

Tạo hộp Like Fanpage FB (ẩn/hiện) dưới góc trái/phải Blogger

Bài viết này mình sẽ chia sẽ các bạn đoạn mã tạo hộp Like Fanpage (Facebook) có nút bấm Hiển thị hoặc Ẩn ở góc dưới giao diện Blogger. Bạn có thể xem demo tại góc phải trang bài viết này.
Hướng dẫn tạo hộp Like Fanpage Facebook góc dưới Blogger
Hướng dẫn:
1. Đăng nhập vào Blogger
2. Vào mục Bố cục » chọn Thêm tiện ích » HTML/Javascripts.
3. Bạn copy 1 trong 2 đoạn code dưới đây tương ứng với hiển thị hộp Like Fanpage ở góc dưới bên phải hoặc góc dưới bên trái Blog, rồi dán vào tiện ích HTML/Javascripts:
- Code hiển thị hộp Like Fanpage nằm góc dưới bên PHẢI Blog:
<script type="text/javascript">
function hide_float_right() {
var content = document.getElementById('float_content_right');
var hide = document.getElementById('hide_float_right');
if (content.style.display == "none")
{content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Ẩn Like Fanpage [X]</a>'; }
else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Hiển thị Like Fanpage</a>';
}
}
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Ẩn Like Fanpage [X]</a></div>
<div id="float_content_right">
<!-- Start-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/thuphucaphe&amp;width=250&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=230" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 230px; width: 250px;background:#fff;"></iframe>
<!-- End-->
</div>
</div>
- Code hiển thị hộp Like Fanpage nằm góc dưới bên TRÁI Blog:
<script type="text/javascript">
function hide_float_left() {
var content = document.getElementById('float_content_left');
var hide = document.getElementById('hide_float_left');
if (content.style.display == "none")
{content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Ẩn Like Fanpage [X]</a>'; }
else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Hiển thị Like Fanpage</a>';
}
}
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
<div id="hide_float_left">
<a href="javascript:hide_float_left()">Ẩn Like Fanpage [X]</a></div>
<div id="float_content_left">
<!-- Start-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/thuphucaphe&amp;width=250&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=200" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 200px; width: 250px;background:#fff;"></iframe>
<!-- End -->
</div>
</div>
4. Bấm Lưu để hoàn thành.

* Lưu ý các vị trí tô màu: (Bạn có thể cân chỉnh cho phù hợp)
https://www.facebook.com/thuphucaphe: Bạn thay đổi lại thành URL trang Fanpage Facebook của bạn.
width: Chiều rộng hộp Like Fanpage (trong code có 2 vị trí)
height: Chiều cao hộp Like Fanpage (trong code có 2 vị trí)






Previous Post
Next Post

Mình là Trần Hoàng Phú, mình muốn chia sẽ những hiểu biết đến cộng đồng qua những bài viết, mặc dù điều đó còn rất nhỏ bé. 
Đừng quên kết bạn và nhận xét bài viết của mình nhé! ^^

Share
NỘI DUNG PHÙ HỢP