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

Ẩn Like Fanpage [X]

Gửi bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Scroll to Top