Tạo menu cố định cho blog

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
1. 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ứ gì thì nó vẫn ở đó, người xem vẫn thấy nó.
2. 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ư trên 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
Mình giả sử blog của bạn đã có menu sẵn rồi. Trong trường hợp bạn chưa có menu, bạn vui lòng đọc bài viết khác để biết cách tạo menu

Phương pháp 1
1. Vào Chỉnh sửa mẫu (Edit template)
2.Bạn cần xác định cá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 để xác định
3. Đặt tất cả code liên quan đến menu vào giữa 2 thẻ sau đây
<div id="navigationbar">
 ... Code menu ở đây ... 
</div>
4. Tìm đến thẻ ]]></b:skin> và paste đoạn code sau đây TRÊN nó:
#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
5. Save 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 cá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 để xác định
3. Đặt tất cả code liên quan đến menu vào giữa 2 thẻ sau đây
<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ó:
#sticky_navigation { 
background: #ffffff;
width: 100%;
margin-right: 0px;
left: 0px;
position: relative;
z-index: 9999;
}
5. Cuối cùng là 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 ấn save
<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>
Nguồn: Từ Internet