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 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.


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ó IdClass như sau:

<div id="smoothmenu1" class="ddsmoothmenu">

» Trong đó:

Màu đỏ smoothmenu1Id của menu đó

Mầu xanh ddsmoothmenuclass 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:skin> là được.

» 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:


+ Đoạn code nếu dùng class:


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>


» 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à %)






Đánh giá bài viết

Cảm ơn bạn đã đọc bài viết!

  • Mọi thắc mắc, gợi ý hoặc Báo link hỏng xin chia sẻ bên dưới hoặc Gửi Tin Nhắn
  • Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
  • Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.

Bình luận bài viết này!