Ẩn sidebar khi xem bài viết trong blogspot
Một ngày nào đó khi bạn chán cái bố cục cố định của một Template và muốn cho blog của mình có những thay đổi khác đi so với những blog khác. Bài viết hôm nay mình sẽ hướng dẫn các bạn thủ thuật làm ẩn toàn bộ sidebar khi bạn xem bài viết, hoặc làm ẩn toàn ộ sidebar khi bạn xem trang chủ, thủ thuật này sẽ giúp cho người đọc có thể load bài viết nhanh hơn.

Các bạn có thể xem Demo ngay tại thời điểm mình đăng bài viết này. (Nếu để ý bạn sẽ thấy khi xem bài viết này sidebar bên phải của mình đã biến mất)

☼ Ở thủ thuật này ta sẽ có 2 bước phải thực hiên:


» Bước 1: Ẩn sidebar ở trang bài viết


1.1. Vào mẫu (Template).
1.2. Vào Chỉnh sửa HTML (Edit HTML) [không cần nhấp chọn mở rộng tiện ích mẫu].
1.3. Tìm đoạn code của sidebar, tương tự như bên dưới:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
...
</b:section>
</div>
- Các bạn phải  xác định đúng thẻ đóng  </div>  của sidebar nếu không khi lưu mẫu sẽ báo lỗi không thể lưu được.

1.4. Thêm đoạn code màu đỏ vào như bên dưới:
<b:if cond='data:blog.pageType != "item"'> 
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
...
</b:section>
</div>
</b:if>
5. Lưu mẫu (Save).

» Bước 2 : Tùy chỉnh lại code CSS của class main 

Lưu ý: Tùy Template khác nhau mà Class main có tên khác, như : content, main-wrapper,...
- Thủ thuật chính trong bài viết này chính là ẩn sidebar và hiển thị style riêng cho class main khi ta đọc bài viết. Do vậy ta phải dùng tới lệnh b:if để làm việc này.
2.1- Vào Mẫu
2.2- Vào Chỉnh sửa HTML
2.3- Tìm đoạn code CSS của class main , nó trông giống như bên dưới:
#main {
width:540px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
-. Thay thế nó bằng đoạn code như bên dưới:
<style>
<b:if cond='data:blog.pageType == "item"'>
#main {
float: left;
word-wrap: break-word;
overflow: hidden;
}
<b:else/>
#main {
width:540px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
</b:if>

</style>
- Ở trên ta bỏ thuộc tính width:540px; để bài viết có thể lấp đi phần trống do Sidebar ẩn để lại.

- Các thuộc tính nên thay đổi hợp lý nhất là thuộc tính float: left; của class main và class sidebar phải ngược nhau, tức là trong trường hợp này thuộc tính float của sidebar sẽ là float: right; . Mình lưu ý điều này chủ yếu là giúp cho bố cục blog trông hợp lý hơn thôi.

- Một điều lưu ý cuối cùng : ở 1 số template ta sẽ thấy thuộc tính float có dạng float: $startSide; hoặc float: $endSide; , hay thay đổi nó lại thành float: left; hoặc float: right;

3. 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  ]]></b:skin> 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ẻ  ]]></b:skin> được.

2.4. Lưu mẫu lại.