Tạo menu cố định phía trên khi lăn chuột trong Blogger ~ blog chia sẻ kiến thức lập trình

Bạn thấy hiệu ứng sau khi lăng chuột xuống dưới, menu của blog vẫn ở phía trên cùng để cho bạn tiện theo dõi. Bài viết sẽ hướng dẫn bạn làm được như vậy. Blog tham khảo từ hai trangxomisse.com và backslash.gr.

Lưu ý quan trọng

Bạn nên backup lại template của blog mình để tránh trường hợp chỉnh sửa thất bại.

Bạn chỉ làm MỘT trong hai phương pháp dưới đây tùy theo mục đích và giao diện blog của bạn:

Phương pháp 1: Nếu như menu blog của bạn ở trên cùng nhất và bạn muốn nó cố định ở đó luôn, cho dù bạn có lăn chuột hay làm bất cứ thứ gì thì nó vẫn ở đó, người xem vẫn thấy nó.
Phương pháp 2: Nếu như menu blog của bạn không nằm ở trên cùng nhất, trên nó vẫn còn có những thứ khác, ví dụ như blog Math2IT này của mình, trên cái menu vẫn còn tên của blog và thanh điều hướng. Bạn muốn là khi lăn chuột xuống dưới thì cái menu tự động lên sát trên cùng và dính ở đó để người xem có thể theo dõi (xem hiệu ứng của blog này).

Mình giả sử blog bạn đã có sẵn menu rồi. Trong trường hợp blog bạn chưa có menu, bạn vui lòng đọc bài viết khác để làm cách nào có thể tạo menu cho blog của mình.

Phương pháp 1

1 Vào Chỉnh sửa mẫu (Edit template)

2 Bạn cần xác định chính xác thẻ <div> chứa toàn bộ menu của bạn. Để làm điều này bạn có thể dùng công cụ Firebug của Firefox để xác định.

3 Đặt tất cả code liên quan đến cái menu vào giữa 2 thẻ sau đây

1
2
3
4
5
<div id="navigationbar">
... Code menu ở đây ...
</div>

4 Tìm đến thẻ ]]></b:skin> và paste đoạn code sau đây TRÊN nó

1
2
3
#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

5 Save template lại và xem kết quả.

Phương pháp 2

1 Vào Chỉnh sửa mẫu (Edit template)

2 Bạn cần xác định chính xác thẻ <div> chứa toàn bộ menu của bạn. Để làm điều này bạn có thể dùng công cụ Firebug của Firefox để xác định.

3 Đặt tất cả code liên quan đến cái menu vào giữa 2 thẻ sau đây

1
2
3
4
5
<div id="sticky_navigationbar">
... Code menu ở đây ...
</div>

4 Tìm đến thẻ ]]></b:skin> và paste đoạn code sau đây TRÊN nó

1
2
3
4
5
6
7
8
9
10
#sticky_navigation { 
background: #ffffff;
width: 100%;
margin-right: 0px;
left: 0px;
position: relative;
z-index: 9999;
}

5 Cuối cùng bạn cần tạo một script để nói cho trình duyệt biết khi nào bạn lăn chuột thì menu sẽ dính lên trên. Bạn vào Layout > Add Gadget > HTML/Javascript Gadget và dán đoạn code sau đây vào rồi nhấn Save

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 // grab the initial top offset of the navigation 
 var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
 
 // our function that decides weather the navigation bar should have "fixed" css position or not.
 var sticky_navigation = function(){
  var scroll_top = $(window).scrollTop(); // our current vertical position from the top
  
  // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
  if (scroll_top > sticky_navigation_offset_top) { 
   $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
  } else {
   $('#sticky_navigation').css({ 'position': 'relative' }); 
  }   
 };
 
 // run our function on load
 sticky_navigation();
 
 // and run it again every time you scroll
 $(window).scroll(function() {
   sticky_navigation();
 });
 
 // NOT required:
 // for this demo disable all links that point to "#"
 $('a[href="#"]').click(function(event){ 
  event.preventDefault(); 
 });
 
});
</script>

Ở đây blog đã tỉnh lượt một số bước và tùy chọn cho đơn giản nhất, bạn có thể xem thêm thông tin ở trangxomisse.com và trang backslash.gr.