Bảng mục lục liệt kê nội dung cho Blogger

Mục lục nội dung là tất cả những gì có trong Blogger được liệt kê ra. Nó giúp cho việc giảm tỷ lệ thoát khỏi Blog của bạn và hơn nữa nó rất phù hợp cho việc bạn sử dụng nó làm sitemap cho
người dùng xem blog của bạn.
Hôm nay, itviet360 sẽ chia sẻ với bạn thủ thuật tạo bảng mục lục nội dung này cho blog. Tiện ích này được khá nhiều Blog sử dụng và một số bạn cũng có
hỏi về hướng dẫn của thủ thuật này. Và dưới đây là hướng dẫn, bạn có thể thao khảo trực tiếp ở Demo và nếu thấy thích thú thì hãy sử dụng nó làm sơ đồ trang của Blog nhé! Bảng được chia làm 2 cột, 1 bên là Label của bài viết và một bên là danh sách bài viết thuộc những label tương ứng đó.

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ả

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích


Nguồn: itviet360