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

Read more…

Theo yêu cầu của bạn MAX

[FD's BlOg] - Thủ thuật mình sẽ hướng dẫn các bạn thay đổi vị trí của các cột trong template 3 cột. Như ở template 2 cột, việc này khá đơn giản, ta chỉ cần gán thuộc tính float cho các cột là left hoặc right thì có thể thay đổi vị trí của nó. Còn ở template 3 cột, ta cũng dùng cách đó nhưng phức tạp hơn 1 chút.

Và do đây là thủ thuật yêu cầu nên mình sẽ hướng dẫn theo code template của yêu cầu. Và sẽ rút ra các tổng quát cho các template 3 cột khác.
Cụ thể trong thủ thuật này mình sẽ nói đến template FalknerPress (Design by CamelGrap)

Hình ảnh minh họa:

Bố cục gốc

Bố cục thay đổi theo yêu cầu

☼ Bây giờ ta bắt đầu thủ thuật:
- Do trong code của template mẫu này, các thuộc tính float của các cột đã phù hợp nên mình sẽ bỏ qua bước chỉnh sửa thuộc tính float, phần này sẽ nói ở bên dưới.

1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Tìm đến đoạn code HTML của left-sidebar , và trong code template của mẫu trên thì nó là code bên dưới:

<div id='left-sidebar'>

<b:section class='categorie' id='left-sidebarr' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'/>
<b:widget id='TextList1' locked='false' title='Books' type='TextList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Text1' locked='false' title='Sample Text' type='Text'/>
</b:section>
</div>

4. Sau khi tìm được đoạn code trên, ta hãy di chuyển nó vào vị trí như bên dưới :

<div id='container'>

{chèn đoạn code ở bước 3 vào vị trí này}

<div id='content'>
<!--INITIALIZE SMOOTH GALLERY-->

- và nó sẽ trông như thế này :

<div id='container'>

<div id='left-sidebar'>

<b:section class='categorie' id='left-sidebarr' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'/>
<b:widget id='TextList1' locked='false' title='Books' type='TextList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Text1' locked='false' title='Sample Text' type='Text'/>
</b:section>
</div>

<div id='content'>
<!--INITIALIZE SMOOTH GALLERY-->

5. Save template.

☼ Hướng dẫn tổng quát :
- Giả sử 1 template 3 cột có layout như hình bên dưới:

- Và code CSS của nó như sau:

#main {
float:left;
...
...
...
}
#sidebar1 {
float:left;
...
...
...
}
#sidebar2 {
float:left;
...
...
...
}

- Và bố cục của nó trong code template như bên dưới :

<div id='main'>
<b:section class='main' id='main' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar1'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
...
...
...
</b:section>
</div>

- Với bố cục trong code template và các thuộc tính trong code CSS như trên thì vị trí các cột lần lượt là main, sidebar1, sidebar2 . Nếu các bạn chỉ chỉnh sửa code CSS (chỉnh sửa thuộc tính float) thì ta chỉ được 2 bố cục duy nhất từ 3 cột này, đó là 2 cột sidebar nằm bên trái hoặc phải. Mà không thể cho cột bài viết nằm vào giữa 2 cột sidebar. Muốn làm được như vậy các bạn phải thay đổi vị trí code của các cột trong code template.

- Như ở đoạn code trên, nếu muốn di chuyển cột sidebar vào giữa thì bạn di chuyển cho đoạn code của cột main nằm giữa 2 đoạn code của 2 cột sidebar (như bên dưới)

<div id='sidebar1'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='main'>
<b:section class='main' id='main' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
...
...
...
</b:section>
</div>

- Ngoài ra muốn đảo vị trí các cột sidebar cho nhau thì các bạn cũng thực hiện tương tự.

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

Read more…