Ẩn sidebar khi xem bài viết

Ở 1 số template, các bạn thường thấy 1 điều
: khi ta vào xem bài viết thì bố cục của blog bị thay đổi, không còn giống
như bố cục ở ngoài trang chủ. Bài viết hôm nay mình sẽ hướng dẫn các bạn
thực hiện tương tự thủ thuật này, đó là làm ẩn toàn bộ sidebar khi bạn xem
bài viết, 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 tại blog test
của mình :
bl1-fd.blogspot.com

Hình ảnh minh họa:



Hiển thị sidebar ở các trang khác
ngoài trang bài viết

(trong hình minh họa là ở trang chủ)

Ẩn sidebar khi xem bài viết

Trong bài viết này mình sẽ ứng dụng cho các template có
2 cột, các template có
3 cột các bạn cũng làm tương tự.

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




A. Bước 1 :
Ẩ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 của
sidebar, nó trông giống như bên dưới:
<div id='sidebar-wrapper'><br /><b:section class='sidebar' id='sidebar' preferred='yes'><br />...<br />...<br />...<br /></b:section><br /></div><br />


- Hãy xác định đúng thẻ đóng
</div> của
sidebar

4. Thêm đoạn code
màu đỏ vào như bên dưới:

<b:if cond='data:blog.pageType != "item"'><br /><div id='sidebar-wrapper'><br /><b:section class='sidebar' id='sidebar' preferred='yes'><br />...<br />...<br />...<br /></b:section><br /></div><br /></b:if><br /><br />



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



B. Bước 2
: 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,... )

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



1. Đầu tiên hãy
xác định code CSS của class
main:

+ Vào bố cục

+ Vào chỉnh sửa code HTML

+ tìm đoạn code CSS của class
main , nó trông giống như bên dưới:

#main {<br />width:400px;<br />float: left;<br />word-wrap: break-word;<br />overflow: hidden;<br />}<br />
2. Khi tìm được code của class main, ta thay thế nó bằng đoạn code như bên dưới:
<style><br /><b:if cond='data:blog.pageType == "item"'><br />#main {<br />float: left;<br />word-wrap: break-word;<br />overflow: hidden;<br />}<br /><b:else/><br />#main {<br />width:400px;<br />float: left;<br />word-wrap: break-word;<br />overflow: hidden;<br />}<br /></b:if><br /><br /></style><br /><br />


- Để ý ở trên ta sẽ thấy là khi load trang bài viết
mình không gán thuộc tính độ rộng (width)
cho class main, sở dĩ làm như vậy là để
lấp đi chỗ trống do phần sidebar tạo ra
khi nó bị ẩn.

- Các thuộc tính bên trong của class này ta không nên thay đổi nhiều, chỉ lưu ý
một điều, 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.



4. Cuối cùng là
save template.