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 |
Các bước thực hiện thủ thuật
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ẻ Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger
làm sao để nó hiện thị Sticky quoảng cáo chỉ ở trong trang bài viết như của anh mà không hiện ở trang chủ hay nhãn ==giúp em với
Trả lờiXóaBạn đọc bài viết này nhé: Hiển thị tiện ích ở trang chủ hoặc trang cố định
Xóa