• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

ScrollingSidebar cho blogspot

10
09/10/2011

Nhiều người hỏi Yolks , làm sao để có thể cho sidebar di chuyển theo thành Scrolling của trình duyệt web. Rất đơn giản nhưng chúng ta có 2 cách làm: Dùng .js hoặc css đều được . Yolks sẽ nêu 2 cách ae muốn làm sao cũng được.



Trước tiên:Xin lưu ý cách tìm ID sidebar để add thêm css vào thêm ID cho chính xác với .js

Bước 1: Dùng css
Tìm đoạn css chính của sidebar theo hình:
#sidebar{width:295px;float:right}
Thay nó thành:
#sidebar{width:295px;float:right;position: fixed;left: 50%; top: 90px;margin: 0 0 0 110px;max-height:1000px;
;}

Chỉnh lệnh left và top cho sidebar.
Lưu ý: chỉ dùng cho sidebar thứ 3 hoặc áp dụng với sidebar ngắn gọn.
Bước 2: Dùng .js:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
</script>
Nếu đã có:
&lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'&gt;&lt;/script&gt;
Thì xóa nó đi và thay sidebar thành ID chính của blog bạn theo hình trên.

Nếu nó chạy mãi không dừng thì thêm vào css của sidebar đoạn code vd sau.
#sidebar{width:295px;float:right;max-height:1000px;}
Chỉnh thông số cho phù hợp

{10 bình luậnAdd yours ?}

09:09:00, 9 thg 10, 2011

Nếu không áp dụng cho cả sidebar mà chỉ 1 thành phần nằm trong sidebar thì sao nhỉ? Phải thử nghiệm xem thế nào mới được!

Reply
09:17:00, 9 thg 10, 2011

Yolks có thể nói rõ file js chèn ở đâu không? Và 1 điều nữa là lúc mình di chuyển blog xuống dưới thì sidebar chạy đến đỉnh đầu của trang, sau đó được giữ cố định ở đó thì thế nào? Giống như quảng cáo ở nhiều trang Dantri hay Vnexpress!

Reply
Yolks
AUTHOR
11:24:00, 9 thg 10, 2011

</body> vào trước thẻ này , mà em sợ ko để demo được đâu huhuhu :3) 24h cho demo bắt đầu đếm ngược

Reply
11:38:00, 9 thg 10, 2011

@Yolks Cái DEMO không ổn Yolks ạ!

Reply
11:55:00, 9 thg 10, 2011

@Yolks DEMO không được ngon lắm Yolks ạ! Bài viết cũng chưa được hay lắm!

Reply
12:23:00, 9 thg 10, 2011

Dạo này Yolk siêng post bài ghê nhỉ. toàn những thủ thuật hay.

Reply
12:47:00, 9 thg 10, 2011

dùng css vừa gọn vừa nhẹ

Reply
15:11:00, 9 thg 10, 2011

@Yolks Yolks nên tạo một blogspot để dùng riêng cho Demo, cài này chơi demo ngay trên trang Yolks k nên vì nó làm lút mất mấy tiện ích của sidebar rồi, xí lắm đó nha.:1)

Reply
09:35:00, 17 thg 10, 2011

Nếu cho xuống dưới cùng của thay vì ở trên đầu thì sửa kiểu gì nhỉ bạn yolks?

Reply
20:53:00, 2 thg 11, 2011

làm thế nào cho nó chạy mượt hơn hả các bác ?

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn