25 tháng 1, 2014
Bạn muốn nhấn mạnh 1 vị trí nào đó của Blog? Bạn muốn khoanh vùng những nội dung cần được chú ý trên blogger của mình?
Tạo Sticky hay còn hiểu là tạo kết dính 1 vị trí khi kéo thanh cuộn trình duyệt lúc mình xem Web hoặc Blog. Bài viết này itviet360 chia sẻ với bạn thủ thuật tạo Sticky cho nhiều Widget của blogspot.
 |
| Thủ thuật tạo Sticky cho nhiều Widget của blogspot |
Demo các bạn xem bài (kéo thanh cuộn xuống để thấy nhé): Những câu nói hay về tình yêu
Đọc thêm »Bạn muốn nhấn mạnh 1 vị trí nào đó của Blog? Bạn muốn khoanh vùng những nội dung cần được chú ý trên blogger của mình?
Tạo Sticky hay còn hiểu là tạo kết dính 1 vị trí khi kéo thanh cuộn trình duyệt lúc mình xem Web hoặc Blog. Bài viết này itviet360 chia sẻ với bạn thủ thuật tạo Sticky cho nhiều Widget của blogspot.
|
| Thủ thuật tạo Sticky cho nhiều Widget của blogspot |
1. Xác định ID Widget của Blogger
- Vào bảng điều khiển -> bố cục -> Chỉnh sửa tiện ích mình cần tạo Sticky
Ví dụ ở trên mình xác định được đó là tiện ích HTML4
2. Code Sticky
- Vào mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
- Tìm tới </body> và dán code dưới đây ngay trên nó
<script>
// Sticky widget by itviet360.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML4");
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking
{background:#f2f2f2 !important; position:fixed !important; top:0;
z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top:
0; position:relative\9 !important;}
</style>
Trong đó:
Thuộc tính Style CSS .bs_sticking các bạn có thể thay đổi theo ý mình nhé
Chúc các bạn vui vẻ
