Hướng dẫn tạo Sticky Widget cho Blogspot

Người Đăng: Unknown

Sunday, June 1, 2014

Chia Sẻ :

Tweet

Hôm nay mình xin hướng dẫn các bạn một thủ thuật web mới, nâng cao hơn cho blog của bạn. Đó là cách tạo một Sticky Widget luôn luôn hiện khi kéo lên kéo xuống trang blog nhìn cho chuyện nghiệp.

Bước 1:

- Các bạn vào phần chỉnh sửa mẫu.

Bước 1

Bước 2:

- Tìm đến thẻ đóng </body>. Chèn code sau vào trước nó:

<!-- Stiky -->
<script>
// 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("PlusBadge1"); // 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>
<!-- /Stiky -->

- Hỉnh ảnh minh họa:

Minh họa chèn code

- Lưu ý: Về độ rộng của Stickey Widget các bạn có thể thay đổi sau khi đổi giá trị phần mình bôi vàng như trên nhé. (Có thể bỏ with đi thêm giá trị số vào ''px'')
- Cuối cùng lưu mẫu lại thế là xong.

- Kết quả đây cả nhà nhé:

Kết quả

- Hy vọng với thủ thuật mới này sẽ giúp các bạn trang trí cho blog của mình một cách đẹp và chuyên nghiệp nhất.

Have Fun!

Tác giả: Phạm Duy Khánh

Tag : Blogger, Tips Web