Vietchiase.com - Blog Chia Sẻ Kiến thức - Thủ thuật internet - Thiết kế website

Quay trở lại với chương trình mỗi ngày một thủ thuật Blogspot ( :( nhưng mình đã không làm được). Hôm nay, mình muốn giới thiệu tới các bạn một dạng sitemap hữu ích cho người xem Blog của bạn bằng việc tạo ra những mục lục thống kê nội dung dưới dạng 1 bảng 2 cột. Rất vừa mắt cho người xem.
Bạn sẽ thấy rõ hơn dưới bản demo trực tiếp và nếu bạn thích thú với sitemap dạng này thì hãy sử dụng nó bằng cách làm theo hướng dẫn được mình chia sẻ dưới đây.

XEM DEMO

Để làm được như DEMO bạn làm theo hướng dẫn dưới đây.
Bước 1: Tạo một trang mới bằng cách vào bảng điều khiển Blogger -> Trang (Pages) → Trang mới (New Page) → Soạn thảo ở chế độ HTML
Bước 2: Dán code dưới đây vào nội dung trang

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://your-url.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://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Thay URL bằng URL Blog của bạn
Bước 3: Lưu mẫu lại và xem kết quả