Thesis theme cho chúng ta nhiều lựa chọn về layout. Hai dạng layout thường được chúng ta lựa chọn là: 2 cột và 3 cột. Với 3 cột, thường sẽ khó cho việc phân chia các widget cho phù hợp (thường là list category và liên kết), tương tự với 2 cột cũng sẽ gặp trường hợp sibar rất dài, và trống trải. Vì vậy, HT lựa chọn dạng 2 cột và bên dưới sẽ chia cột để tận dụng không gian trống. Bài viết theo yêu cầu của bạn sea.

Đăng ký Sidebar:

Bạn thêm đoạn code sau vào file custom_functions.php.

/***** Register Sidebar http://hutruc.com *****/
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'After Sidebar Left', //Dang ky sidebar voi ten After Sidebar Left
'before_widget' => '<li class="a_s1_l">', //Code xuat hien truoc widget
'after_widget' => '</li>', //Code xuat hien sau widget
'before_title' => '<h3>', //Code xuat hien truoc tieu de widget
'after_title' => '</h3>', //Code xuat hien sau tieu de widget
));
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'After Sidebar Right',
'before_widget' => '<li class="a_s1_r">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
/***** End #Register Sidebar http://hutruc.com *****/

Sau khi thêm đoạn code này thành công, bạn vào phần quản lý widget đã thấy xuất hiện 2 Sidebar: After Sidebar Left và After Sidebar Right. Bạn có thể kéo thả các widget vào đây bình thường. Tuy nhiên, nó chưa xuất hiện bên ngoài blog của bạn. Theo dõi bước tiếp theo.

Đã có sidebar After Sidebar Left, Right title="Đã có sidebar After Sidebar Left, Right" >Đã có sidebar After Sidebar Left, Right

Hiển thị sidebar trên blog:

Bạn thêm đoạn code sau vào file custom_functions.php

/***** After Sidebar 1 http://hutruc.com *****/
add_action('thesis_hook_after_sidebar_1', 'after_sidebar_1'); //Xac dinh vi tri them vao (ben duoi sidebar 1)
function after_sidebar_1() { ?>
<li class="after_sidebar_1">
	<ul class="sidebar_left fl"> <!-- sidebar left -->
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('After Sidebar Left') ) : ?><?php endif; ?>
	</ul> <!-- #sidebar left -->
	<ul class="sidebar_right fr"> <!-- sidebar right -->
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('After Sidebar Right') ) : ?><?php endif; ?>
	</ul> <!-- #sidebar right -->
</li>
<?php
}
/***** End #After Sidebar 1 http://hutruc.com *****/

Đến đây cơ bản là đã hoàn thành phần code. Việc cuối cùng là make-up cho phù hợp với blog chúng ta thôi.

Make-up:

Do cùng là thesis nhưng phần nhiều đã được mọi người custom lại nên không thể hướng dẫn CSS cụ thể được. Cơ bản thì .sidebar_left có thuộc tính float: left; width:100px; và .sidebar_left có thuộc tính float: right; width:120px;. Đây bài viết đến đây xin phép được kết thúc. Việc dùng CSS để làm đẹp bạn tự làm để hưởng thụ cái thú chơi blog nhé.

Update: Cập nhật đoạn CSS mẫu mà HT đang sử dụng để tiện cho các bạn tham khảo.

.after_sidebar_1{width:330px;font-size:1.3em;}
.after_sidebar_1 ul li {list-style: none;}
.a_s1_l,.a_s1_r{border: 1px solid #ddd;padding:15px;width:120px;margin:0 0 25px 0;}
li.a_s1_l li,li.a_s1_r li{margin-bottom:0.692em;}
.fl{float:left;}
.fr{float:right;}

Chúc bạn thành công! Nếu có thắc mắc gì về CSS của bài này, bạn có thể comment bên dưới, HT sẽ hổ trợ nhiệt tình :)