3.22.2026

Mục Lục Widget

Bạn,

"Today I will share with you a simple hack that allows you to have a listing of of your posts in chronological order. Think of it as the default "Blog Archive" widget without the hassle of opening and/or showing the arrow buttons."


Trên đây là đoạn văn tôi đã dùng để giới thiệu "Mục lục Widget" cách đây hai năm. Hôm nay, khi nhìn lại nó, tôi nghĩ thêm ra cách làm cho nó "scroll", bằng cách dùng CSS từ Blog của cô Annie.

Trên trang hoctrointro.blogspot.com có chỉ cách chèn code này vào template của bạn. Tôi hy vọng bạn sẽ dễ dàng hiểu cách lắp đặt sau khi đọc trang.



<b:widget id='TOC' locked='false' title='Contents' type='BlogArchive'>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Sepember, 2008****************** -->
<!-- *****************Table Of Contents Widget - Written by Hoctro****************** -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='contents'>
<b:if cond='data:style == "HIERARCHY"'>
<div id='TableOfContents' style='height:200px;overflow:auto;'><ul>
<b:include data='data' name='interval'/>
</ul></div>
    </b:if>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='posts' var='posts'>
  <b:loop values='data:posts' var='i'>
    <li><a expr:href='data:i.url'><data:i.title/></a></li>
  </b:loop>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
    <b:if cond='data:i.data'>
      <b:include data='i.data' name='interval'/>
    </b:if>
    <b:if cond='data:i.posts'>
      <b:include data='i.posts' name='posts'/>
    </b:if>
  </b:loop>
</b:includable>
</b:widget>


Chúc bạn may mắn, và hẹn gặp lại lần sau.

Hoctro
9/19/08