Tạo sitemap hay mục lục (Table Of Contents) cho Blogpost

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Một dạng sitemap hay bảng mục lục (Table Of Content(TOC)) được Abu-Farhan phát triển rất, mình thấy rất phù hợp cho các blogger nên hôm nay mình xin chia sẽ cùng các bạn cách tạo Table Of Content này. Bạn có thể xem ảnh minh họa bên dưới


Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
.gfg-root {
width : 528px; /* độ rộng của TOC*/
height : auto;
magin-left:5px;
overflow : hidden;
text-align : center;
font-family: arial;
border: 1px dotted #fff; /* đường viền TOC*/
font-size: 12px; /* cở chữ của TOC*/
}
.gfg-subtitle {
font-size: 12px; /* cở chữ của phần tên nhãn*/
font-weight : bold;
background: url(http://lh3.ggpht.com/_BTztXRwC9ik/TGVE5Cnhk7I/AAAAAAAACwU/-SAoszBlQig/fgf.png);
overflow : hidden;
margin-bottom : 0px;
text-align:left;
}
.gfg-subtitle a {
color : #ff0000; /* màu chữ của tên nhãn*/
padding:3px 0px 3px 15px;}
.gfg-subtitle a:hover {
color : #fff; /* màu chữ của tên nhãn khi rê chuột*/
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-list a{
color:#666; /* màu chữ của tiêu đề bài viết*/
}
.gfg-list a:hover{
color:#000; /* màu chữ của tiêu đề bài viết khi rê chuột*/
}

5. Save template lại
6. Bạn vào soạn thảo bài viết mới (New Post) ở chế độ HTML và chèn vào code bên dưới
<script style="text/javascript" src="http://data-traidatmui.appspot.com/scripts/sitemap.js"></script> <script src="http://www.traidatmui.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

- Bạn thay http://www.traidatmui.com thành địa chỉ blog của bạn.

7. Bây giờ bạn xuất bản bài viết (Publish posts) là xong

Ở trên mình hướng dẫn bạn chèn vào trong phần soạn thảo bài viết, tuy nhiên bạn vẫn có thể chèn vào ngay HTML/Javascript và cho nó hiển thị ở một vị trí thích hợp.

Chúc bạn thành công

Tham khảo abu-farhan.com

Loading...

15 nhận xét

  1. Mình đã có test lại nó chạy vẫn tốt, bạn hãy xem thử trong lúc chỉnh sửa code đã có xảy ra vấn đề gì không nha. Nếu không xử lý được thì bạn có thể cho mình xem cụ thể hơn. Thân!

    Trả lờiXóa
  2. Mình đã vào xem trang của bạn và mình thấy phần mục lục nó hoạt động tốt đấy chứ, nó hiển thị như mong muốn mà bạn. Có thể do mạng yếu trang bạn chưa load hết dữ liệu. idontknow

    Trả lờiXóa
  3. mình phát hiện lỗi và đã khắc phục. cảm ơn bạn. Một lời chắc bạn đã nghe nhiều rồi mà mình rất muốn nói lại. Trang của bạn rất hay và có nhiều điều để người khác học hỏi. cảm ơn vì sự cống hiến.

    Trả lờiXóa
  4. Dù sao cũng cảm ơn bạn! Mình chỉ mong có thể cùng nhau chia sẻ và học hỏi cùng mọi người về lĩnh vực mình yêu thích, để biết thêm nhiều điều thú vị. Mong sẽ giúp ích được mọi người.Thân! hihihi

    Trả lờiXóa
  5. cái này TDM có thể sửa đổi chút dc ko? Tức là cũng cách làm đó, bạn có thể cho nó hiện list theo từng label riêng không. VD: bấm vào label thủ thuật thì nó sẽ hiện ra list bài viết có trong label thủ thuật đó, dc ko TDM ? hihihihi, mong bạn giúp đỡ

    Trả lờiXóa
  6. Ở trên là nó đã phân chia ra theo từng nhãn bài viết, bạn có thể xem thêm một kiểu sitemap tương tự nhưng được rút gọn lại tại đây. Không biết ý bạn có phải như thủ thuật mà mình giới thiệu ở link trên không? Bạn xem thử thế nào nhé!

    Trả lờiXóa
  7. mình đã xem 2 cái trên rùi, ko phải ý mình, ý mình là bấm vào từng label trên menu thay vì nó ra bài viết của label đó theo kiểu tên bài, nội dung và read more, nhưng mình chỉ muốn nó hiện bài theo dạng danh sách mà thui sổ ra hết các bài nằm trong label đó. Bạn hiểu ý mình ko?

    Trả lờiXóa
  8. @ Hoang Nguyen: Ah mình hiểu rồi, tức là bạn muốn hiển thị các trang nhãn (label) dạng list hay nói cách khác là chỉ hiển thị tiêu đề bài viết thôi đúng không bạn? Vâng thời gian tói mình chia sẻ cho bạn nhé.

    Trả lờiXóa
  9. ok thanks bạn, bạn có bài có thể gửi qua mail mình ko?

    Trả lờiXóa
  10. @ Hoang Nguyen: Vài ngày tới mình sẽ post trên site mình để cùng chia sẻ cho các bạn khác quan tâm luôn nhé!

    Trả lờiXóa
  11. Cảm ơn thủ thuật rất hay của anh, nhưng em làm theo và tạo trang tĩnh thì bị lỗi "đọc thêm", anh có thể hướng dẫn em cách sửa đc không ạ?
    Link tại đây ạ:
    http://guitarzin.blogspot.com/p/sitemap.html
    Anh cũng có thể hướng dẫn em làm thế nào chỉ hiện những tag mình muốn không ? Nó hiện hết cả tag ẩn của em.

    Trả lờiXóa
    Trả lời
    1. Bạn xem cách khắc phục lỗi hiển thị readmore ở trang tĩnh tại bài viết này phần "Cập nhật".

      Phần loại bỏ những tag ẩn thì hiện anh chưa biết cách khắc phục.

      Xóa
    2. Thank anh, em đã sửa xong cho blog của mình. Cám ơn anh về bài viết rất nhiều. Mong anh có thể sửa được giống yêu cầu của em thì hay quá :votay:

      Xóa
    3. Anh sẽ tìm hiểu thêm phần này

      Xóa