Hiện thị Sidebar theo ý muốn

Vừa qua, vnpressnet sử dụng mẫu blog Magazine Template R.1.3, Đặc điểm thú vị của mẫu blong này là Multi Column, trang Home hiển thị 3 cột, nhưng khi xem bài viết chi tiết thì chỉ hiển thị 2 cột với cột bài viết chính main và một cột mặc định.

 Thủ thuật tham khảo:

► Hướng dẫn tạo thêm cột (sidebar) cho Blog

► Tạo thanh trạng thái "breadcrumb" cho Blogger

► Hướng dẫn điều chỉnh độ rộng khung comment

Lang thang vào mạng thấy thủ thuật của Fandung hay nên xin phép tác giả được upload lại bài viết hướng dẫn thủ thuật làm ẩn 2 cột sidebar khi xem bài viết, thêm vào đó là tạo thêm 1 cột sidebar thứ 3 sẽ hiển thị bên phải, còn phần bài viết bên trái. Và cột sidebar thứ 3 này sẽ chỉ hiện thị duy nhất ở trang bài viết mà thôi. Hay nói cách khác, cột sidebar thứ 3 này và 2 cột sidebar cũ sẽ không thể hiện thị cùng 1 lúc.

Có thể nói thủ thuật này là 1 thủ thuật thay đổi bố cục blog theo trang, với trang bài viết thì sẽ hiển thị dạng template 2 cột, còn ở các trang khác trang bài viết sẽ hiển thị dạng 3 cột. Và ta có thể xem đây là 1 template 4 cột, và ta chỉ thấy được điều này trong Bố cục » Phần tử trang.

Đây là hình ảnh minh họa thủ thuật

Giả sử ta có 1 template có các phần main, sidebar1, sidebar2 có tên tương ứng là : main-wrapper, newsidebar-wrapper, sidebar-wrapper (do là thủ thuật yêu cầu của bạn HC, nên mình lấy tên các id này trùng với các id trong code template của bạn HC)

Bây giờ ta vào Bố cục » Chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích), và tìm các đoạn code CSS và HTML của 3 phần trên, nó sẽ trông như bên dưới:
Code CSS:

#main-wrapper {
background: #ffffff;
width: 540px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Code HTML:

<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
...
...
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
...
...
</b:section>
</div>

<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
...
...
</b:section>
</div>

☼ Bây giờ ta bắt đầu thủ thuật (Lưu ý save template lại trước khi thực hiện - nếu cho chắc chắn hãy tạo 1 blog mới và test trước khi thực hiện với blog của mình)
A. Bước 1 : chỉnh sửa code CSS
- ở bước này ta sẽ có 2 điều phải làm, 1 là thay đổi style cho phần main khi hiển thị ở trang bài viết, và tạo 1 đoạn code CSS mới cho cột sidebar thứ 3
- Với đoạn code CSS ở trên, ta sẽ xóa phần code CSS của main (phần code bị xóa này sẽ được chỉnh sửa thêm và dán vào bên dưới sau dòng code ]]></b:skin>) và tạo thêm code CSS cho cột sidebar thứ 3. Ta sẽ đặt tên cho nó là rightsidebar-wrapper và code CSS sẽ trông như bên dưới:

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#rightsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

- Như vậy đã tạo xong code CSS cho cột thứ 3, bây giờ ta tùy chỉnh CSS cho phần main, hãy dán đoạn code bên dưới vào trước dòng code ]]></b:skin>

<style>

<b:if cond='data:blog.pageType == "item"'>
#main-wrapper {
background: #ffffff;
width: 760px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
<b:else/>
#main-wrapper {
background: #ffffff;
width: 540px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
</b:if>

</style>

- Chú ý đoạn code màu đỏ :
+ width: 760px; : đây là độ rộng của phần main khi hiển thị ở trang bài viết (các bạn có thể bỏ dòng code này, tức là không gán độ rộng cho nó). Giá trị này được tính bằng (540px + 220px + 220px) - 220px = 760px, tức là độ rộng của 3 cột ban đầu trừ đi độ rộng của cột sidebar thứ 3 được thêm vào.
+ width: 540px; : đây là độ rộng của phần main khi hiển thị ở các trang khác trang bài viết.

Như vậy đã xong phần code CSS, bây giờ ta sang phần Code HTML của các phần

B. Bước 2 : thêm cột thứ 3 vào trong code template .
- Tiếp tục ở bước 1 (bước 1 vẫn chưa save template) tiếp tục xuống phía dưới, ta sẽ thấy code HTML như bên dưới :

<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
...
...
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
...
...
</b:section>
</div>

<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
...
...
</b:section>
</div>

- Và ta thay đổi nó như bên dưới :

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

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
...
...
</b:section>
</div>

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

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

</b:section>
</div>
</b:if>

- Đoạn code màu cam là code của cột sidebar thứ 3
- Các đoạn code màu đỏ là để thiết lập bố cục hiển thị của blog ở các trang.


C. Bước 3: cuối cùng là save template.

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

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.