Trang chủ > Thủ thuật blog > Ẩn sidebar khi xem bài viết

Ẩn sidebar khi xem bài viết

Chắc hẵn, các bạn lướt web nhiều bạn thì bạn cũng đã thấy có một số web hay blog khi ta click vào xem các bài viết thì sidebar sẽ biến mất. Điều đó nó sẽ làm cho trang blog hay web trong đẹp hơn hoặc là sẽ tiện hơn. Đó là thủ thuật ẩn sidebar ở các trang bài viết, mình xin giới thiệu cho các bạn thủ thuật này để các bạn tham khảo.

☼ Các bước thực hiện, ở đây có 2 bước cho các bạn làm:

Thứ nhất là ẩn sidebar ở trang bài viết
1. Vào bố cục
2. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
3. Tìm đoạn code như bên dưới:

– Hãy xác định đúng thẻ đóng của sidebar
4. Thêm đoạn code màu đỏ vào như bên dưới:

5. Save template.

Ẩn sidebar xong tiếp theo là tùy chỉnh lại code CSS của class main (ở các template khác có thể class main có tên khác, như : content, main-wrapper, main-wrap1 … )
-Bước này chúng ta sẽ chỉnh class main hiển thị khi sidebar bị ẩn đi. Đê thực hiện điều này chúng ta sử dụng tới lệnh b:if.

1. Đầu tiên vào bố cục
2. Tiếp theo vào chỉnh sửa code HTML
3. Và tìm đoạn code CSS của class main như bên dưới:

#main-wrap1 {
display:block;
width:540px;
float:right;
margin:0px 2px 0px 0px;
padding:0px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word;
overflow: hidden;

4. Giờ hãy thế nó bằng đoạn code như bên dưới:



#main-wrap1 {
display:block;
float:right;
margin:0px 2px 0px 0px;
padding:0px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word;
overflow: hidden;

#main-wrap1 {
display:block;
width:540px;
float:right;
margin:0px 2px 0px 0px;
padding:0px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word;
overflow: hidden;

Lưu ý: Lệnh float của sidebar và của main phải ngược nhau mới hiển thị tốt được. Tức là nếu sidebar sử dung float:left, thì class main phải là float:right và ngược lạit, tùy theo template của bạn mà tùy chỉnh cho hợp lý. Và khi load trang ta không dùng lệnh width như trên để lấp khoảng trống của sidebar khi xem bài.
5. Sau khi thay thế xong ta tiếp tục thực hiện bước cuối cùng, đó là di chuyển toàn bộ đoạn code vừa thay thế được đến vị trí ngay sau đoạn code ]]> trong code template.
– Sở dĩ phải làm vậy là do ta không thể dùng lệnh b:if trong thẻ được.

6. Cuối cùng là save template.
Chúc bạn thành công

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s