Top Ad unit 728 × 90

Best

[Blogger] Làm dính 1 widget (tiện ích) bất kỳ bằng script

Bài viết này mình xin chia sẻ một thủ thuật rất hay cho blogger, đó là làm dính (sticky) một tiện ích bất kỳ trên blog. Mình lấy ví dụ như trang này (các bạn để ý tiện ích LIÊN HỆ trên sidebar).

Sau đây là cách thực hiện:







Các bạn chỉ cần paste đoạn code sau vào trước thẻ đóng </body>:

<!-- Sticky widget by kjmagic.blogspot.com -->
<script>
//<![CDATA[
ko_makeSticky("Label1");
function ko_makeSticky(elem) {
var ko_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
ko_sticky.parentNode.insertBefore(scrollee, ko_sticky);
var width = ko_sticky.offsetWidth;
var iniClass = ko_sticky.className + ' ko_sticky';
window.addEventListener('scroll', ko_sticking, false);
function ko_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
ko_sticky.className = iniClass + ' ko_sticking';
ko_sticky.style.width = width + "px";
} else {
ko_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.ko_sticking {color:#333;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>
<!-- End Sticky widget by www.đoàntrịnh.vn -->

Thay Label1 thành ID của tiện ích mà bạn muốn làm dính.

Chúc thành công !

Không có nhận xét nào:

Hình ảnh chủ đề của fpm. Được tạo bởi Blogger.