Tạo sticky widget cho Blogger bằng Script

Đối với các widget bình thường thì khi người dùng cuộn trang xuống dưới hay lên trên thì nó sẽ bị che khuất. Nếu bạn có một tiện ích quan trọn và muốn nó luôn di chuyển theo khi dùng cuộn trang thì hãy đọc bài viết này, mình sẽ giúp các bạn làm điều đó.

Sticky widget

DEMO

#Tạo sticky widget

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ </body>
4. Dán code dưới vào trên thẻ mà bạn vừa tìm

   <!-- Stiky Widget -->
   <script type="text/Javascript">
   // Sticky widget by www.blogtariff.com
   // Tutorial at http://www.blogtariff.com/2013/07/add-sticky-scroll-any-widget-to.html
   // Free to use or share, but please keep this notice intact.
   //<![CDATA[
   ko_makeSticky("Widget_ID"); // enter your widget ID here
   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 Stiky Widget -->
   

5. Thay Widget_ID thành ID của Widget mà muốn áp dụng. Nếu chưa rõ cách xác định ID của widget thì bạn hãy xem bài viết này.
6. Lưu mẫu lại và kiểm tra kết quả