Sau đây Namkna 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/namkna.blogspot&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/namkna.blogspot là URL trang fanpage facebook của bạn.
- width=250 : Chiều rộng khung
- height=230: Chiều cao khung
<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/namkna.blogspot&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,
Nhận xét
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóathay đổi thuộc tính gì để nó không tự bật ra khi load trang vậy anh Nam?
Trả lờiXóahttps://www.facebook.com/namkna.blogspot là URL trang fanpage facebook của em chứ không phải trang cá nhân nha em.
Trả lờiXóaEm có thể xem cách tạo trang fanpage tại đây: Cách tạo trang (Fanpage) trên facebook
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaBài viết bạn rất hay . Mình copy về làm nhé . Mình làm được rồi nhưng mình muốn nó mằm cố định bên tay phải luôn chứ không phải ở góc cuối thì ntn bạn giúp mình nhé . Mình mới bắt đầu làm thôi nên cũng không hiểu gì cho lắm . Bạn hỗ trợ mình nhé. Cảm ơn bài viết bạn nhiều . http://hotrothue247.blogspot.com/
Trả lờiXóaBạn chỉ cần làm như bài này: http://namkna.blogspot.com/2014/04/creating-facebook-like-box-widget-valid-html5-w3c-for-blogspot.html
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóacám ơn bạn nha
Trả lờiXóa