Sau đây minh sẽ hướng dẫn các bạn thủ thuật chèn khung Like Fanpage ở góc phải hoặc góc trái
màn hình giống như các popup quảng cáo ở các trang phim. Bạn có thể mở rộng hoặc thu nhỏ chúng tùy theo ý muốn của bạn.Để làm được điều này các bạn làm như hướng dẫn sau đây:
Các bạn có thể xem hình ảnh minh họa ở bên cạnh để hiểu rõ hơn nguyên tắc hoạt động của tiện ích này nha:
» Thêm Khung Like Fanpage ở góc màn hình bên trái hoặc bên phải cho blogspot
1- Vào Bố cục (Layout)2- Tạo một tiện ích HTML/Javascripts và dán code bên dưới vào (Hãy chọn một trong 2 kiểu bên dưới nha):2.1- style 1: Khung sẽ hiện ở góc dưới cùng bên tay phải của trình duyệt khi bạn xem trang.
<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()">Tắt box fanpage [X]</a>'; }
else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem box 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()">Tắt box fanpa [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/xiroblog&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>
<!-- End quang cao -->
</div>
</div>
Tùy chỉnh:
- https://www.facebook.com/xiroblog là URL trang fanpage facebook của bạn.
- width=250 : Chiều rộng khung
- height=230: Chiều cao khung
2.2- style 2: Khung sẽ hiện ở góc dưới cùng bên tay trái của trình duyệt khi bạn xem trang.
<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()">Tắt box fanpage [X]</a>'; }
else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem box 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()">Tắt box fanpage [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/xiroblog&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>
<!-- End quang cao -->
</div>
</div>
3- Lưu mẫu lại và kiểm tra thành quả của bạn nha
