Fanpage ở góc màn hình cho blog

Posted by: Unknown on 11:28 PM in Blogger, Thủ Thuật Blogspot 0

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&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 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&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 quang cao -->
</div>
</div>

3- Lưu mẫu lại và kiểm tra thành quả của bạn nha

Thanh Hoa 's Blog Sưu Tầm