"Chia sidebar thành 2 cột con cho Blogspot"

(Traidatmui.com) – Ở một số template của Blogger đôi khi bạn sẽ thấy cột sidebar của nó chia ra thành 2 hay 3 cột để có thể đặt thêm nhiều tiện ích hơn với độ rộng phù hợp. Như vậy, khi bạn đang sở hữu một template mà cột sidebar của bạn không có chia cột như vậy thì bạn làm như thế nào? Bạn thay cả template thì thật phiền phức và có thể không phù hợp với ý của bạn. Chính vì thế hôm nay mình chia sẻ cùng các bạn cách để chia sidebar ra thành 2 cột con ngay trong template bạn đang sử dụng. Thủ thuật cũng không quá phức tạp, bạn chỉ cần thực hiện theo các bước mình giới thiệu bên dưới.

Hình ảnh minh họa
Hình ảnh bố cục sau thủ thuật
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm đến code như bên dưới hoặc tương tự
#sidebar-wrapper {
float:right;
margin-top:10px;
overflow:hidden;
width:265px; /* độ rộng của cột sidebar trên blog của bạn*/
word-wrap:break-word;
}

5. Thêm code bên dưới vào ngay sau code vừa tìm được ở trên
#left-sidebar-wrapper { width:49%; /* độ rộng của cột sidebar con bên trái*/
float:left; }
#right-sidebar-wrapper { width:49%; /* độ rộng của cột sidebar con bên phải*/
float:right; }

Bạn có thể tùy chỉnh lại độ rộng (width) của các cột sidebar trên cho phù hợp với template của bạn. Tuy nhiên bạn lưu ý: width (sidebar-wrapper) >= width (left-sidebar-wrapper) + width (right-sidebar-wrapper).

6. Tiếp theo bạn tìm đến code bên dưới hoặc tương tự
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='ĐĂNNG KÝ NHẬN BÀI VIẾT QUA EMAIL' type='FollowByEmail'/>

</b:section>
</div>

7. Bây giờ bạn hãy thêm vào code vừa tìm được đoạn code như bên dưới
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='ĐĂNNG KÝ NHẬN BÀI VIẾT QUA EMAIL' type='FollowByEmail'/>

</b:section>

<div id='left-sidebar-wrapper'>
<b:section class='sidebar section' id='sidebar2' preferred='yes'>
<b:widget id='HTML34' locked='false' title='BÀI VIẾT MỚI' type='HTML'/>
</b:section>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar section' id='sidebar3' preferred='yes'>
<b:widget id='HTML23' locked='false' title='ChatBox' type='HTML'/>
</b:section>
</div>

</div>

» Chú ý: Phần code màu đỏ chính là code thêm vào, bạn hãy chú ý cần phải xác định đúng thẻ đóng để tránh lỗi template. Trong code trên các widget trong template của bạn có thể khác với code mình hướng dẫn, tuy nhiên nó không ảnh hưởng nhiều nếu bạn muốn giữ chúng lại thì không cần thay đổi gì cả, nếu muốn bỏ đi thì bạn có thể xóa chúng đi.

8. Cuối cùng save template lại

» Cập nhật 05/08/2011

Theo bạn dinhthienhoan yêu cầu bên dưới mình xin mở rộng thủ thuật này một chút, đó là việc chúng ta sẽ tạo bên dưới 2 cột đã chia ở trên một khu vực để chúng ta có thể chèn thêm tiện ích với độ rộng bằng sidebar (tức bằng tổng độ rộng 2 cột đã chia). Việc này bạn có thể thay code ở bước 7 thành code bên dưới. Code màu xanh là code được thêm vào.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='ĐĂNNG KÝ NHẬN BÀI VIẾT QUA EMAIL' type='FollowByEmail'/>

</b:section>

<div id='left-sidebar-wrapper'>
<b:section class='sidebar section' id='sidebar2' preferred='yes'>
<b:widget id='HTML34' locked='false' title='BÀI VIẾT MỚI' type='HTML'/>
</b:section>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar section' id='sidebar3' preferred='yes'>
<b:widget id='HTML23' locked='false' title='ChatBox' type='HTML'/>
</b:section>
</div>

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

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

Xem khác cùng chủ đề

11 nhận xét | Viết lời bình

7/24/2011 03:46:00 SA Trả lời

thủ thuật này rất hay.anh có thể hướng dẫn thêm cách tạo 1 Sidebar phía dưới 2 cột và kích thước bằng Sidebar phía trên 2 cột luôn đi ạ thank anh

Admin
7/27/2011 07:48:00 CH Trả lời

Ah để anh hướng dẫn sau nhe, em hay theo dõi anh sẽ Update tại bài viết này luôn.@-)

Admin
8/05/2011 01:43:00 SA Trả lời

Yêu cầu của bạn dinhthienhoan mình đã cập nhật ở bài viết trên bạn có thể xem lại ở trên.

12/02/2011 06:14:00 SA Trả lời

anh ơi ! cái này nó báo là ko đc trùng id anh à. @@.

Admin
12/02/2011 06:22:00 SA Trả lời

@ Free times: Đó là do trong template của em có các id như: FollowByEmail1, HTML23 hoặc HTML34. Em xem thông báo trùng id nào thì em thay đổi thành id khác nhé.

12/03/2011 02:47:00 SA Trả lời

@TRai đất mũi : Cái này làm đơn thuần như anh vẫn chưa được đâu :D
Phải tạo ra 2 cái css cho 2 cái sidebar mới chia nữa.
Nếu không 2 cái sidebar mới tạo sẽ có chiều ngang bằng với chiều ngang của sibar cũ. Em sửa lại rồi
Code này là theo trang của em
Tìm đoạn code :
[code]
#sidebar-wrapper {
float:right;
margin-top:10px;
overflow:hidden;
width:265px; /* độ rộng của cột sidebar trên blog của bạn*/
word-wrap:break-word;
}
[/code]
Thêm đoạn code dưới đây sau đoạn code phía trên
[code]
#right-col {
width:48%;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#left-col {
width:48%;
float:left;
word-wrap:break-word;
overflow:hidden;
}
.sidebar-sub {
color: $sidebartextcolor;
line-height: 1.5em;
font-family: Arial, sans-serif;
float: left;
margin: 0;
width: 150px;
}
.sidebar-sub h2{
font-weight: 600;
margin-top: 0;
color: $sidebarcolor;
text-transform: uppercase;
font-size: 22px;
font-family: 'Yanone Kaffeesatz', arial, serif;
}
.sidebar-sub a {
color: $sidebartextcolor;
}
.sidebar-sub .widget {
background: white // màu nền sidebar mới chia
width: 175px; // độ dài
padding : 5px 5px;
border: 1px solid #E0E0DE;
margin-bottom: 10px;
}
[/code]
Tìm tiếp đoạn này
[code]




[/code]
Thay code trên bằng code

[code]






[/code]

Trên đây là 1 chút kiến thức bổ sung. Hi vọng các bạn sẽ làm được

12/03/2011 02:51:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
12/03/2011 02:53:00 SA Trả lời

Vì code ko cho chèn div nên mình bổ sung lại đoạn này nhé
Thay dấu "<" bằng dấu * nhé
Tìm tiếp đoạn này
[code]
*div id='sidebar-wrapper'>
*b:section class='sidebar' id='sidebar' preferred='yes'/>
*/b:section>
*/div>
[/code]
Thay code trên bằng code

[code]
*div id='sidebar-wrapper'>
*b:section class='sidebar' id='sidebar' preferred='yes'>
*/b:section>
*b:section class='sidebar-sub' id='left-col' preferred='yes'/>
*b:section class='sidebar-sub' id='right-col' preferred='yes'/>
*/div>
[/code]

Admin
12/03/2011 04:44:00 SA Trả lời

@ Free times: 2 cột sidebar mới sẽ thừa kế các đặc tính quy định bởi sidebar-wrapper như màu sắc, font, cỡ chữ... Ở đây anh chỉ chia sẻ cách chia ra làm 2 cột. Em có thể thêm css quy định thuộc tính riêng cũng được không cũng được. Độ rộng ở trên thì anh quy định là % để nó phù hợp với các sidebar của những blog khác nhau.

Khi muốn chèn code vào comment thì em nên mã hóa trước nhé, chọn "Chèn code" bên trên khung comment để mã hóa và chèn vào thẻ [code]code đã mã hóa[/code]

12/03/2011 04:54:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
12/03/2011 04:56:00 SA Trả lời

anh thử test cách của anh chưa ?
Em làm theo cách của anh. em dùng google chrome kiểm tra phần tử
thì thấy 2 sidebar đc chia có độ rộng bằng độ rộng của sidebar chính
Và khi vào phần "Add a Gatget" khi Add 2 cột mới chia đó, nó sẽ trùng lên nhau.
Hoặc khi post Tiêu đề của cột dài hơn 49% thì nó bị tràn Tiêu đề :D

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang