Cách tạo 1 wiget cố định cho blogger bằng script

Bạn muốn tạo 1 widget cho blogger, mà khi bạn kéo thả thanh kéo thì widget đó vẫn trượt theo không?
tạo widget trượt theo thanh kéo trong blogger
Cách tạo Widget chạy theo thanh kéo trong blogger bằng script
Widget sticky

Tạo tiện ích widget chạy theo thanh kéo trong blogger

Trong bài viết này thì mình sẽ chia sẻ cho mọi người cách mà làm cho widget của các bạn sẽ hiển thị khi khách truy cập blog của bạn kéo thanh kéo xuống hoặc kéo lên để đọc bài viết thì widget vẫn theo.
vd: bạn có 1 mã adsen bạn chèn bên cạnh blog. sau khi sử dụng cách 
'' Cách tạo Widget chạy theo thanh kéo trong blogger bằng script '' thì cách bạn sẽ được như sau : Mã adsen sẽ di chuyển theo người đọc, người đọc kéo thanh kéo xuống thì mã sẽ xuống.. khá hay đúng không nào. như vậy mã ads của các bạn sẽ tiếp cập được nhiều người hơn.. mà không làm vướng mắt người đọc blog

DEMO các bạn có thể xem trực tiếp trên blog topchiase này. các bạn thấy phần menu trên đầu trang của mình hiển thị kể cả khi kéo xuống cuối trang

Hướng dẫn tạo widget di chuyển theo thanh kéo blogger

Sau đây là cách thực hiện :
Các bạn chỉ cần coppy đoạn code bên dưới và dán nó vào trước thẻ đóng <body>


<!-- Sticky widget by topchiase.net -->
<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 topchiase.net -->
Các bạn chỉ cần thay Label1 bằng id label của các bạn là ok Chúc các bạn thành công với thủ thuật 
tạo Cách tạo Widget chạy theo thanh kéo trong blogger bằng script

BÀI VIẾT CÙNG CHỦ ĐỀ

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công