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">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/thuphucaphe&width=250&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=230" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 230px; width: 250px;background:#fff;"></iframe>

</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">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/thuphucaphe&width=250&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=200" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 200px; width: 250px;background:#fff;"></iframe>

</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í)

Ẩn Like Fanpage [X]