Hot!

Thủ Thuật Tạo Sitemap – Danh Mục (TOC) - Style 3: Thứ tự Alphabet

Thursday, 8 April 2010
toc_of_table VnBlognet [dot] com : Có nhiều cách để tạo danh mục bài viết (Table of contents), hay ta quen gọi là site map cho Blog, trong đó các bạn đã quen với Danh mục theo dạng Lưu trữ Archive, Danh mục theo Label, nay xin giới thiệu với các ban cách tạo Danh mục theo thứ tự Alphabet.
- Đây là thủ thuât do hans bên blog beautifulbeta.blogspot.com giới  thiệu, xin biên tập lại và hướng dẫn các bạn cách thực hiện.

1Truy cập vào Blogger :
- Truy cập vào Blogger  >>  Bảng điều khiển (Dashboard)  >>  Bố cục (Layout)  >>  Chỉnh sửa HTML (Edit HTML).
Hình minh họa:
Table_of_contents

2Chèn mã CSS:
- Tìm (Ctrl F) đoạn mã:
]]></b:skin>
Và thay thế chúng bằng đoạn mã sau:
#toc {
border: 2px solid #C3D9FF;
background: #ffffff;
padding: 5px;
width:500px;
margin:10px 0 20px 0;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #3D81EE;
color: #5d5d54;
padding: 5px 5px 5px 5px;
width: 300px;
}
.toc-header-col1 {
width:300px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:90%;
color: #404040;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:90%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:90%;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
text-decoration: none;
}
]]></b:skin>
- Lưu (Save) lại mẫu.
3Chèn Danh mục:
- Vào Đăng bài (Posting)  >>  Bài đăng mới (New Post)  >>  Chọn soạn bài theo cách Chỉnh sửa HTML (Edit HTML)và dán đoạn code sau vào:
<div id="toc"></div><span style="font-size:80;"></span><script src="http://h1.ripway.com/anshul555/tableofcontents.js"></script><br /><script src="http://Your-Blog_url/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><script type="text/javascript">showToc();</script>
- Click Xuất bản bài đăng (PUBLISH POST) để hoàn thành.

4Chỉnh sửa và lưu file js:

- Bạn chỉnh sửa lại dòng: http://Your-Blog_url thành địa chỉ URL của blog, chẳng hạn là http://vnblognet.com
- Bạn download file h1.ripway.com/anshul555/tableofcontents.js tránh trường hợp file .js của thủ thuật này hết bandwwidth tại đây.
downloadbutton[5]

HitCHÚC CÁC BẠN THÀNH CÔNG !!!
Tags: , ,

Ý kiến bạn đọc [ 32 ]


Kênh20 8 April 2010 14:12

anh add hình bị lỗi rồi! :)

Kênh20 8 April 2010 14:17

à ko lỗi do mạng load châm.
Liên kết site đi anh! :)

VnPress@net 8 April 2010 14:26

Cám ơn bạn kenh20 nhiều, nếu có thể xin trao đổi liên kết với vnpressnet.com cho cùng chủ đề.

Đời Sống 24h 8 April 2010 16:33

Thủ thuật này có làm chậm site khi load k anh. Site em nặng quá rồi :D
À anh sữa lại bên Vnpressnet.com hộ em với title là Đời Sống 24h anh. Thanks anh đã add link cho em

Show9VIP.Com 8 April 2010 17:06

cai nầy tiện ich gi cho site anh :( phan footer dep wa

Tinh 8 April 2010 17:07

Cái lày hay ah nha, em đang tính làm mấy cái trên blogspot đây, thanks bác

vnblognet [dot] com 8 April 2010 18:41

Oh,lâulắm mớithấy Pro Tỉnhghé qua,cám ơn cám ơn.

vnblognet [dot] com 8 April 2010 18:43

@: Đời Sống 24h:Về cơ bản cái này không ảnh hưởng đến tốcđộ load của site. Nóchỉ có tác dụng trong phần bài TOC mà thôi,bạn yên tâm.

Show9VIP.Com 8 April 2010 19:22

Anh Chinh oi , Anh nghiem cuu giup em tao cai Menu nhu vietyo.com duoc khong anh , nhin nhu the thay thich ghe

Show9VIP.Com 8 April 2010 20:57

anh Chinh xem hộ em cái nầy nha [ http://c.upanh.com/upload/4/879/LT0.9010119_1_1.jpg ] lam` sao khi re~ chuot vao 1 tieu đề hay đường link thi` no se~ hiên như bên anh ý

vnblognet [dot] com 8 April 2010 21:56

Về cơ bản chỉ tạo được cái menu giống bên vnpressnet.com thôi, em có thích không Show9x

VnPress@net 8 April 2010 22:25

1> em vào chỉnh sửa html và tìm a:hover
2> thêm vào trong khung { dòng
text-decoration:underline;
là được

Show9VIP.Com 8 April 2010 22:40

hehe lam` duoc roi , ma` cai menu nay em xem thu? thuat rat phuc tap ,anh co bai huong dan gon va` nhanh chu

Mr. Giải Pháp Số 9 April 2010 09:19

Hehe! Ghé thăm hàng xóm mới nè!
Chúc Blog của người anh em ngày một phát triển! :))

ethongtin.net 9 April 2010 22:54

Bài viết rất hay ! thank bac ! Bác cho tớ copy lại nhé ! t sẽ để báck link !

vnblognet [dot] com 10 April 2010 08:37

Cám ơn MR.GPS và ethongtin. Chúc các bạn .... đại thành công.

Đời Sống 24h 10 April 2010 16:16

Lâu k thấy anh up bài mới nhỉ

tmtvietnam 13 April 2010 16:39

Mình làm đoạn copy vào đăng bài không được Chính à.
www.taichinh247.com

tmtvietnam 13 April 2010 16:48

Mình làm đoạn copy vào đăng bài không được Chính à.
www.taichinh247.com

VnPress@net 13 April 2010 17:07

sorry bị nhầm code trong phần 3 chèn danh mục. Đoạn mã
script src="http://http://h1.ripway.com/anshul555/tableofcontents.js mình để nhầm thành http://http: đó TMT.

Cám ơn bạn nhé.

Fred Nguyen 15 April 2010 10:34

Thế cứ mỗi lần viết bài đều phải chèn code vô bài viết à??

VnPress@net 15 April 2010 10:36

Không Fred oi, chỉ 1 lần, nó tự động chèn bài mới vào danh dách TOC.

Giang 28 June 2010 21:01

Anh Chinh ơi, nếu làm được phân trang cho thủ thuật này thì tốt quá. Vì blog mỗi ngày 1 nhiều bài viết thêm, load 1 lúc tất cả thì lâu lắm.

Nếu phân trang được. Khoảng 50 - 80 bài viết/ 1 trang cứ thế ấn Next tiếp sang các trang khác được thì quá hay ^^

chinhnd 28 June 2010 21:41

Cám ơn Giang nhiều, mình sẽ cố gắng.

Admin 2 September 2010 18:04

Link bi Die rùi bạn ơi? Bạn cho mình hỏi luôn cái này nhé:

Dưới phần bài đăng của Blogger có dòng chứ này: "Đăng ký: Các Bài đăng (Atom)"

Làm sao để có thể xóa nó đi hả bạn? Thank bạn!

Admin 2 September 2010 18:05

Tên tớ đặt để hiện thị lên Blog vậy nên ...:D

Kít 2 September 2010 22:59

@ admin: bạn tìm tới đoạn code:

.feed-links {
clear: both;
line-height: 2.5em;
}

và thêm display:none; xuống dưới như sau:

.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}

Kít 2 September 2010 23:02

Chúc cả nhà một đêm...mất ngủ :)) ^^!

Kít 2 September 2010 23:04

Anh Chính bỏ cái shoutbox làm anh em mất chỗ chat chit

vnblognet [dot] com 3 September 2010 10:34

Để cái đó nhiều người tiện thể ... nói bậy lắm nên bỏ Kit à.

KID_KTV2K 5 September 2010 03:52

Cái này hình như không hiện đủ bài viết.

www.sim9x.co.cc 26 May 2011 22:18

Nhận add link với tất cả cộng đồng blogger. Thế Giới Sim 9x - www.sim9x.co.cc

Ý kiến của bạn