Menu luôn hiển thị trên đầu hoặc chân blogspot

Cố định menu tại một vị trí nhất định trên trang web khi kéo thanh cuộn
Cố định menu tại một vị trí nhất định trên trình duyệt, để menu đó luôn hiển thị khi kéo thanh cuộn sẽ giúp cho trang của bạn chuyên nghiệp và thu hút được nhiều độc giả hơn, và điều hướng được khách thăm blog của bạn đến những chủ đề mà bạn muốn giới thiệu.

Namkna đã giới thiệu cho các bạn rất nhiều mẫu menu khác nhau như: menu 1 cấp, xổ dọc nhiều cấpmenu ngangdropmenu, hay menu dạng kết hợp... Các mẫu đó đều đặt cố định dưới header. 

Hôm nay namkna xẽ giới thiệu cho các bạn một thủ thuật đơn giản cho phép bạn tùy biến tất cả các mẫu menu mà namkna đã giới thiệu. Giúp bạn có thể đặt thanh Menu này ở bất cứ vị trí nào, ví dụ : trên cùng (top), bên dưới(bottom), trái trên(left-top), phải dưới (right-bottom) của trình duyệt khi bạn kéo chuột đến bất kỳ vị trí nào trong blog của bạn...

Các bạn có thể xem Demo ngay tại trang namkna với thanh menu  trên cùng của trình duyệt bạn đang xem luôn hiển thị khi bạn kéo chuột xuống chân blog.

☼ Cách tạo một menu luôn hiển thi cố định trên cùng hoặc dưới chân trình duyệt web

1- Xác định tên Id hoặc Class của menu Phần này thường nằm trong thẻ div của các menu.
Mình sẽ lấy ví dụ về một menu mình từng giới thiệu tại bài viết này, thì có Id và Class như sau:
<div id="smoothmenu1" class="ddsmoothmenu">
» Trong đó: 
  • Màu đỏ smoothmenu1 là Id của menu đó
  • Mầu xanh ddsmoothmenu là class của menu đó (với các menu khác bạn xác định tương tự)
2- Tiếp theo là thêm thuộc tính cho menu luôn nằm ở vị trí xác định. bạn chỉ cần thêm đoạn CSS sau trước thẻ ]]></b:sin> là được.
ID-CLASS{
z-index:9999;
position: fixed;
_position:absolute;
top: 0px;}
» Trong đó: 
  • Thay ID-CLASS  thành tên Id hoặc tên Class của menu mà bạn muốn hiển thị cố định ở một vị trí nhất định trên trình duyệt.
  • Chú ý: với Id thì thêm dấu thăng # đăng trước tên Id, với Class thì bạn thêm dấu chấm (.) vào trước tên class.
  • Ở đoạn CSS này menu sẽ luôn hiển thị trên đầu blog, nếu muốn hiển thị ở chân blog thì thay chữ top thành bottom (bên dưới), left-top (trên cùng bên trái), right-bottom(dưới cùng bên phải),...
- Với ví dụ Menu xổ dọc nhiều cấp mà mình nói bên trên thì bạn có thể sử dụng một trong 2 đoạn code sau đặt trước thẻ ]]></b:skin> trong mẫu  của bạn:
+ Đoạn code nếu dùng Id: 
#smoothmenu1 {
z-index:9999;
position: fixed;
_position:absolute;
top: 0px;}
+ Đoạn code nếu dùng class:
.ddsmoothmenu {
z-index:9999;
position: fixed;
_position:absolute;
top: 0px;}

☼ Nâng cao khi cố định menu trên blogspot

- Từ đây ta có thể mở rộng thêm rất nhiều thủ thuật khác ngoài tạo menu như trên mà còn để tạo một thông báo.
  • Tạo một dòng thông báo tại một vị trí cố định để độc giả có thể nhìn thấy dễ nhất.
  • Tạo một danh sách các bài viết mới đăng kèm theo hiệu ứng chạy chữ trên đầu hoặc chân blog để độc giả tiện theo dõi.
  • Hoặc bất cứ thứ gì mà bạn muốn hiển thị. Một lời khuyên là : chỉ nên cho phép hiển thị nội dung theo 1 hàng, để không chiếm chỗ trên không gian của blog bạn (Tất nhiên nếu muốn bạn có thể để nhiều hàng hơn) .=>=>=> Demo ngay tại phần footer khi bạn xem bài viết này:

☼ Tự tạo một menu cố định ở một vị trí trên trình duyệt cho blogspot.

- Với những bạn thích học hỏi, khám phá bạn có thể tự tạo cho mình một menu bằng cách, Bạn chỉ cần thêm các tiện ích trên vào trong thẻ div như sau:
<div class="fixed-navbar">
{nội dung mà bạn muốn hiển thị trên khung top hay bottom của bạn}
</div>
Và thêm thuộc tính sau trước thẻ: ]]></b:skin>
div.fixed-navbar {
z-index:9999;
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; top: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}
» Trong đó:
  • position: fixed; top: 0; left: 0; là vị trí hiển thị trên đầu, bạn có thể đổi lại thành position: fixed; bottom: 0; left: 0; để hiện thị phía dưới bên trái.
  • width: 100% là độ rộng của khung bằng chiều rộng blog. Có thể thay dổi bàng số tuyệt đối là width:900Px theo ý bạn. (Nếu bạn đang sử dụng giao Responsive diện thì bạn nên dùng số tương đối là %)

☼ Fix lỗi menu không cố định trên trình duyệt IE6 hoặc cũ hơn

- Trình duyệt IE hiện nay không còn mấy người sử dụng, tuy nhiên mình vẫn sẽ hướng dẫn khắc phục lỗi hiển thị không đúng hoặc không cố định được menu tại một vị trí nhất định trên trình duyệt IE6. Để khắc phục bạn có thể dùng đoạn code CSS sau: 
div.fixed-navbar{
z-index:9999;
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
text-align: left;
width: 200px;
border: 2px #00f solid;
position: fixed;
_position:absolute;
left: 0px;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
» Trong đó:
  • Đoạn code màu tím là code được thêm vào để khai báo với IE6 giúp cho menu hoạt động bình thường.
  • Với code trên thì thanh Navbar sẽ hiển thị ở góc trái bên dưới. Nếu muốn hiển thị bên góc phải bên dưới thì sửa code màu xanh (right) thành left.
  • Với lệnh left: 0px; sẽ cho phép thanh Navbar dịch qua phải (tức canh lề trái) 0 pixel.

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   
Phụ trách thiết kế : Mr.Mika 
Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com