Hướng dẫn tạo trang chỉ mục (sitemap) dạng tab cho Blogger

Screenshot:

Live Demo

Bước 1 : Tạo một trang mới

  Để tạo 1 trang mới, tại giao diện của Blogspot Dashboard → Blog Title → Pages → New Page → Blank Page. Chuyển sang tab chỉnh sửa HTML của trang

Bước 2 : Thêm đoạn code này vào trang

Copy và dán vào tab HTML

<link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://yagarai.blogspot.com/" title="Tabbed TOC">Yagami Raito 's Blog</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://yagarai.blogspot.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Bước 3 : Cấu hình bảng chỉ mục

Thay blogUrl bằng đường dẫn đến Blog của bạn. Bạn có thể thay đổi các tùy chỉnh khác, hướng dẫn thay đổi đã được comment trên mỗi dòng code. Sau khi hoàn thành, các bạn bấm "Save" để hoàn tất.

Vậy là các bạn đã hoàn thành trang chỉ mục đẹp mắt của mình rồi đấy ^^