Loading post navigation ...
 
 

Pro page

12
Nhận xét

[ Yêu cầu ] : Ẩn 2 cột sidebar và hiển thị cột sidebar thứ 3 khi xem bài viết (dùng cho template 3 cột)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Hiệp Cò (www.hiepco.com)
[FD's BlOg] - Như theo yêu cầu, bài viết sẽ hướng dẫn 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 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.


Enter your mail address:

12

Hiệp Cò

hehe đợi bữa giờ cuối cùng cũng có !
Thanks bác nhiều :D

fandung

bữa giờ bận với nhiều thủ thuật còn chưa đăng, nên hơi rối lên 1 chút, giờ mới đăng bài cho HC đc

Tuấn Nguyễn

toàn thủ thuật hay không công nhận blogger có anh võ + anh dũng 2 nhân vật quá pro luôn :D

phattrien@so

Bài nàynói sĩ diện một tý là bình thường, nói bình thường thì không bình thường bởi nó không bình thường, mà là rất ...... CHUYÊN NGHIỆP, xúc tích, rõ ràng và dễ hiểu cũng như dễ thực hiện.

Cho anh copy bài này nhé, FD.

Unknown
demo

anh ơi giúp em với sau khi làm thử cái này ko được giờ khi chay laị template cũ thì sidebar của em lai hiện ở dưới bài đăng, anh xem giúp em với

Đại Cuộc Đặng

Mình muốn cho nó ẩn hết các cột, chỉ hiện nội dung bài đăng thôi thì làm sao vậy Dũng ?

Thanks,

Đại Cuộc Đặng

Mình đã làm tạm được rồi. Thanks Dũng nhé!

Leo Nguyen

không biết mọi người ra sao nhưng mình làm xong thì ok. Nhưng khiu chỉnh sủa Page Elements thì luôn báo lỗi. Không save được.

Unknown

lam khong duoc

Nguyễn Tấn Hoàng

Sao mình không tìm thấy những dòng như thế này nhỉ. id="newsidebar-wrapper"> ....

BacBuu

mình mới học nên chưa hiểu hết, bạn có thể cho mình xin đoạn code đầy đủ không?



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home