Demo ảnh nà:

Spoiler:

Link demo trực tiếp: [You must be registered and logged in to see this link.]

Cách làm:

Vào index_body tìm {BOARD_INDEX} và thay thành

Code:

<table border="0" style="width:100%">
     <tr>
          <td style="width:100%" valign="top">
         {BOARD_INDEX}
          </td>
          <td valign="top">
                  <div class="sidebar" style="width:300px;padding: 10px;">
                     <script>
function chuyenmuc(n,idcm)
{
  $(function () {
        $.ajax({url: "/feed/?f="+n,
  success: function (tb) {
for(var i=2;i<7;i++)
{
var DL=$(tb).find("link:eq("+i+")").text();
var title=$(tb).find("title:eq("+i+")").text();
  $('<li><a href="'+DL+'">'+title+'</a></li>').appendTo(idcm);
}
}})
        })
}
</script>
  <div class="widget bd-green">
<h3 class="bg-green"><a href="/f4-">Thông báo mới từ BQT</a></h3>
                  <div id="thongbao"></div>
<script>chuyenmuc(4,'#thongbao')</script>

                    
</div>


                  </div>
          </td>
     </tr>
</table>

Vào css thêm đoạn

Code:

/*chuyenmuc sidebar*/
.bd-green{border:1px solid #89c550;}
.widget h3{display:block;padding:7px 10px;}
.widget{margin:0 0 10px;}
.bg-green{background:#89c550;color:#fff;}
#thongbao{min-height:10px;padding:7px;}
#thongbao li{display:block;text-decoration:none;border-bottom:1px solid #efefef;transition:background .25s ease-in-out;-moz-transition:background .25s ease-in-out;-webkit-transition:background .25s ease-in-out;padding:10px 7px;}
#thongbao li:hover{background:#efefef;}


Lưu ý mấy cái đoạn  

Tùy chỉnh lại id class theo ý thích của bạn nhé , sửa xong phải vô css sửa nữa nhá @@~

chuyenmuc(37,'#thongbao')  thay thành " id class" của bạn số 37 là id chuyên mục

Code này lâu rồi, xài cũng nhẹ :D

Copy ghi nguồn: plusvn nhé