Tomnhien Design

1. #subfooter {
2. width:730px;
3. margin-left:15px;
4. margin-right:15px;
5. height:300px;
6. background-color:#d5d6d7;
7. clear:both;
8. }
9. 
   
10. #subfooter .widget {
11. width:240px;
12. height:300px;
13. float:left;
14. }
15. 
    
16. #subfooter .widget .inner {
17. padding:10px;
18. 
    
19. }

  
 Widget 1 
  
 Widget 2 
  
 Widget 3 
  

Bây giờ trang Blog của bạn sẽ tương tự như thế này:

-

Step 3 Making it widget ready

Hiện giờ nó vẫn chưa có tính năng “widget ready”, nghĩa là ta phải edit/add code thủ công mỗi widget qua file footer.php . Bây giờ ta sẽ làm thêm tính năng “widget ready” để có thể add/edit widgets từ Widgets page trong Admin area. Open file functions.php bằng code editor.

Ta sẽ thấy ở phần trên của functions.php như sau:

 '
', 'after_widget' => '
', 'before_title' => '
', 'after_title' => '
', ));

Thay đổi như sau:

 '
', 'after_widget' => '
', 'before_title' => '
', 'after_title' => '
', )); register_sidebar(array('name'=>'subfooterleft')); register_sidebar(array('name'=>'subfootercenter')); register_sidebar(array('name'=>'subfooterright'));

Code này sẽ đăng ký 3 sidebars gọi là subfooterleft, subfootercenter and subfooterright tương ứng với các widgets: trái (left), giữa (center) và phải (right) trong subfooter.

Step 4 Adding the Widgets

Để thêm vào những widgets, vào admin area và click the Design > Widgets tabs. ta sẽ thấy một a drop down menu là “Sidebar”, click vào nó và ta sẽ có thêm 3 options:

Chọn một trong những subfooter options và chọn Show, nó sẽ cho phép ta add widgets ở cột trái của trang, chỉ nên thêm một widget vào mỗi vùng subfooter . Click Save Changes.

Bây giờ trang của ta sẽ tương tự như thế này:

-

Step 5 Making it neater

Nó đã hoạt dộng ngon lành nhưng vẫn còn chưa đẹp.

Thêm đoạn code sau vào file style.css.

#subfooter li { list-style-type: none; list-style-image: none; }  #subfooter li ul { padding-left:0px; font-size:12px; }  #subfooter a { padding:5px; width:90%; text-decoration:none; clear:both; display:block; }  #subfooter a:hover { background-color:#1a6198; color:#FFFFFF; }

-

Result

Và bây giờ ta đã có a widget ready subfooter.

You can download all the files here in .zip format.

Nguồn: http://help-developer.com/