Tạo Sitemap dạng bảng cho blogspot

Đăng bởi Admin | 15/4/13 | 0 nhận xét

Mục lục (Sitemap) là phần rất quan trong của blog. Nó giúp các độc giả có cài nhìn tổng quan về blog của bạn. Qua đó có thể theo dõi các bài viết của bạn theo từng chuyên mục. Style map hôm nay namkna giới thiệu sẽ cho các bạn sitemap dạng bảng (Tabbed) được thiết kế bởi DTE;] với nhiều tùy chọn hơn, về cơ bạn gần giống như một menu dọc xổ ngang ra các bài viết.

» Điểm nổi bật của Sitemap này!

- Tùy biến giao diện rất dễ dàng và đẹp mắt với dạng ảnh.

+ Dạng đơn giản.

+ Dạng nâng cao: sau khi kích hoạt đầy đủ mô tả, ngày tháng đăng bài, ảnh thumbnail...

Các bạn có thể xem demo: VIEW DEMO

» Cách thêm Sitemap style input ves 2 cho blogger.

1. Đăng nhập vào tài khoản Blogger

2. Vào Trang (Trang)

3. Chọn Trang mới (New page) => Trang trống (page blank)

4. Đặt tên cho trang như: Sitemap, mục lục,...

5. Tích chọn vào tab HTML của trang vè dán code bên dưới vào

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/66256041/Sitemap/namkna.blogspot.com/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loadding...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://thuthuatvitinhaz.blogspot.com/2013/04/tao-sitemap-dang-bang-cho-blogspot.html" title="Tabbed TOC">Thu thuat vi tinh</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://thuthuatvitinhaz.blogspot.com/", 
    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="https://dl.dropboxusercontent.com/u/66256041/Sitemap/namkna.blogspot.com/tabbed-toc.js"></script>

» Tùy chỉnh code:

• Thay http://thuthuatvitinhaz.blogspot.com/ bằng URL blog của bạn.
• containerId: "tabbed-toc", Yếu tố ID sẽ được sử dụng như một container cho JSON đã được xử lý (bỏ qua nếu không cần thiết).
• Thay chữ Loadding... thành chữ bạn muốn ví dụ đang tải....
• Trong code trên tab hiển thị  khi ta load trang là nhãn đầu tiên. Chọn nhãn hiển thị khi load trang bằng cách thay đổi activeTab: 1.
• showDates: false, quy định ngày tháng đăng bài. để hiển thị ngày tháng của bài đăng sửa false thành true.
• showSummaries: false, Để hiển thị phần mô tả cho từng bài viết hãy sửa false thànhtrue.
• numChars: 200 Số ký tự mô tả hiển thị
• showThumbnails: false quy định ảnh thu nhỏ. Để hiển thị ảnh thu nhỏ cho các bài viết hãy sửa false thành true.thumbSize: 40, là kích thước ảnh. Trong ví dụ này chiều rộng và chiều cao đều là 40px
• monthNames  là tên các tháng sẽ hiển thị
• newTabLink: true, là hiển thị bài viết trong tab mới khi click chuột vào tiêu đề. Để tắt chức năng hãy sửa True thành false.
• maxResults: 99999, là Số bài tối đã sẽ hiển thị trên site map. Hãy thay đổi giá trị 9999.
• preload: 0, tải trang sau 0 giây. Giời gian ở đây tính là mili giây (1s=1000mls).  Hoặc đơn giản là viết "onload" để tiện ích này tải sau khi toàn bộ trang đã tải hoàn tất.
• sortAlphabetically: true, Là xắp xếp theo thứ tự bảng chữ cái aphabe. Nếu muốn hiển thị theo ngày đăng thì sửa false thành true.
• showNew: 7, số bài viết gần đây nhất sẽ được dán nhãn new.
• newText: " - <em style='color:red;'>New!</em>" là chũ sẽ hiển thị bạn có thể dùng mã HTML để tạo màu chữ. Có thể thay chữ new thành chữ bạn muốn.

                                                                                            ( Theo: Namkna)