Mạch Khóa Số Điện Tử Mạch Đếm Sản Phẩm Mạch Đèn giao thông Ngã Tư Mạch Trái Tim Final Mạch Trái Tim Final Mạch Trái Tim I Love U

April 18, 2011

Ẩn sidebar khi xem bài viết

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.


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 Thiết kế
2. Vào Chỉnh sửa 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'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

...

</b:section>

</div>

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

4. Thêm đoạn code màu xanh 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. 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 Thiết kế
+ Vào Chỉnh sửa HTML
+ Tìm đoạn code CSS của class main, nó trông giống như bên dưới:

#main {

width:400px;
float: left;
word-wrap: break-word;
overflow: hidden;

}

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>

<b:if cond='data:blog.pageType == "item"'>

#main {

float: left;

word-wrap: break-word;

overflow: hidden;

}

<b:else/>

#main {

width:400px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

</b:if>

</style>

- Để ý ở 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.

Chúc các bạn thành công.

0 comments:

Post a Comment

Bạn đọc hãy giúp chúng tôi xây dựng cộng đồng bằng cách để lại bình luận, chúng tôi luôn đón nhận mọi ý kiến của các bạn:
» Bình luận nghiêm túc và không chứa các liên kết quảng cáo.
» Vui lòng không Spam nhận xét với mọi hình thức.
» Rất mong bạn đề tên cho nhận xét của chính mình - Bằng cách chọn vào Tên/URL và điền tên bạn vào (Phần URL có thể bỏ trống ).

- Bạn có thể chèn Link nhạc (NCT), video(Youtube),Hình ảnh vào comment bằng cú pháp:
+ [youtube] Link video Youtube [/youtube].
+ [img] Link ảnh( định dạng PNG, JPG,GIF) [/img]
+Chèn link liên kết: <a href="LINK" rel="nofollow">Name</a>
-Bạn copy mã bên cạnh biểu tượng chèn vào nhận xét để bày tỏ cảm xúc!!

:) :( :)) :(( =)) =D> :D :P