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

(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

Xem khác cùng chủ đề

15 nhận xét | Viết lời bình

Admin
4/04/2011 01:17:00 SA Trả lời

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!

Admin
4/04/2011 03:52:00 SA Trả lời

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

ATC
4/04/2011 07:09:00 SA Trả lời

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.

Admin
4/04/2011 07:41:00 SA Trả lời

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

4/05/2011 07:06:00 SA Trả lời

Test comment lleu

10/22/2011 06:28:00 SA Trả lời

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 đỡ

Admin
10/22/2011 06:49:00 SA Trả lời

Ở 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é!

10/24/2011 10:00:00 CH Trả lời

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?

Admin
10/24/2011 10:17:00 CH Trả lời

@ 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é.

10/25/2011 09:21:00 CH Trả lời

ok thanks bạn, bạn có bài có thể gửi qua mail mình ko?

Admin
10/25/2011 10:30:00 CH Trả lời

@ 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é!

4/27/2012 01:16:00 SA Trả lời

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.

Admin
4/27/2012 01:44:00 SA Trả lời

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.

4/27/2012 01:55:00 SA Trả lời

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:

Admin
4/27/2012 02:12:00 SA Trả lời

Anh sẽ tìm hiểu thêm phần này

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang