4. Tạo mục lục thủ công bằng liên kết ẩn

Vì sao lại là “mục lục thủ công”?! Vì sau này sẽ có bài tạo mục lục tự động nữa Mục lục thủ công có mỗi nhược điểm là mất nhiều thời gian và liên kết không tự động thay đổi khi các bạn đổi địa chỉ blog thôi, còn lại thì không có gì để phàn nàn cả hunhun Nếu đã đọc từ đầu bài hướng dẫn này đến tận đây thì hẳn là các bạn đã biết cách tạo mục lục bằng liên kết ẩn rồi, vậy thì tại sao lại có cái này nữa? Được rồi, để mình giải thích chút xíu cuoinherang Khi làm mục lục truyện bằng cách chèn liên kết ẩn, các bạn thường sẽ phải gõ lần lượt từng chương như Chương 1, Chương 2, Chương 3,… rồi chèn liên kết ẩn đúng không nào? Nếu truyện có ít chương thì không nói làm gì, nhưng nếu có tận mấy trăm chương thì lúc đó gõ hơi bị mệt metmoi Thế nên trong phần này, Sera sẽ chuẩn bị sẵn những chương này cho các bạn, các bạn chỉ cần mang về rồi chèn liên kết ẩn vào thôi, không cần phải hì hục gõ nữa hoanho

blackpinkheart Trước khi đi vào từng nội dung chi tiết của phần này, các bạn cần lưu ý những điều sau:

1.Mình chỉ giúp các bạn tạo sẵn mục lục dạng Chương 1, Chương 2, Chương 3,… chứ còn dạng thứ tự chương kèm tên chương như kiểu “Chương 1: Dẫn sói vào nhà” thì mình không làm nhé. Cái này thì tất nhiên là sau đó các bạn phải tự nhập thêm vào thứ tự chương rồi chứ mình làm sao biết tên chương của các bạn là gì mà nhập thay

2.Các thao tác của mình được thao tác trên trình duyệt Google Chrome và hệ điều hành Windows 7, nếu các bạn sử dụng trình duyệt và hệ điều hành khác thì thao tác có thể khác đi đôi chút nhưng không đáng kể (và mình nghĩ là các bạn có thể tự thích ứng và mày mò được).

3.Về cơ bản thì các bạn chỉ cần copy+paste code mục lục tạo sẵn rồi chèn liên kết ẩn vào là được. Nhưng để mục lục trông lung linh hơn thì mình sẽ hướng dẫn các bạn một số tuỳ chỉnh với code. Các công cụ cần thiết khi tuỳ chỉnh code mục lục bao gồm: phần mềm Microsoft Word 2010, phần mềm Notepad (là Notepad, không phải Notepad++ nhé). Máy tính của mình sử dụng MS Word phiên bản 2010 nên mình hướng dẫn các bạn tạo bảng theo phiên bản này, các phiên bản cũ hoặc mới hơn mình không cài nên mình không rõ, các bạn có thể lên mạng để tìm cách sử dụng thao tác tương ứng với phiên bản MS Word 2010. Còn Notepad là phần mềm có sẵn trong hệ điều hành Windows ở bất kì phiên bản nào. Nếu các bạn dùng hệ điều hành khác mà không có phần mềm này thì các bạn có thể lên mạng tải về hoặc tự tìm kiếm những phần mềm có chức năng tương đương.

4.Trong bài này, mình sẽ hướng dẫn các bạn tuỳ chỉnh mục lục với thuộc tính căn lề là căn giữa (center). Nếu các bạn muốn tìm hiểu thêm để định dạng code mục lục đẹp hơn (đổi phông chữ, cỡ chữ,…) thì các bạn hãy đọc thêm bài HTML và một số code HTML cơ bản cho blog WordPress để biết cách viết một số thuộc tính nhé cuoinherang

5.Cuối mỗi phần hướng dẫn tuỳ chỉnh sẽ có video minh hoạ thao tác, nếu các bạn đọc hướng dẫn bằng lời và hình ảnh (nếu có) mà vẫn chưa hiểu thì hãy xem video để dễ hình dung hơn nhé cuoinherang

6.Khi các bạn sử dụng code mục lục tạo sẵn của mình, dù đã tuỳ chỉnh hay chưa tuỳ chỉnh, miễn là các bạn lấy nó để sử dụng thì hãy ghi nguồn cho mình như một cách tôn trọng công sức của người viết. Dưới đây là code ghi nguồn mình đã viết sẵn, các bạn hãy dán nó vào cuối phần mục lục truyện hoặc cuối bài viết chứa mục lục truyện nhé cuoinherang

<p style="text-align: center; margin: 15px 0;"><span style="display: inline-block; color: #808080; border-top: 1px solid #cccccc; padding-top: 7px; font-family: Arial; font-size: 13px; word-break: break-word;"><em>(Code mục lục được chia sẻ bởi <span style="color: #808080;"><strong><a style="color: #808080;" href="https://wptutbyserahwang.wordpress.com/2020/03/08/lien-ket-an-va-cach-tao-muc-luc-thu-cong/2/#code-muc-luc" target="_blank" rel="noopener">Sera Hwang</a></strong></span>)</em></span></p>

Được rồi, trước khi tuỳ chỉnh thì chúng ta phải có code mục lục tạo sẵn trước đã nhamhiem Dưới đây là link Google Drive chứa các code mục lục tạo sẵn với số chương từ 1 đến 999, các bạn tải về và giải nén với mật khẩu (password) ghi ở bên dưới nhé Nếu truyện các bạn làm mục lục có hơn 999 chương thì cứ nói với mình, mình sẽ tạo code cho các bạn. Mình làm bằng Excel chứ không gõ tay nên cùng lắm chỉ mất 5-10 phút thôi, các bạn không phải ngại

🍇 Link tải về:

Bấm vào đây để truy cập vào Google Drive

🍇 Pass giải nén: serahwang

Link ở trên bao gồm mục lục đơn (dạng 1 dòng) và mục lục tạo bằng code tạo bảng (gồm mục lục 2 cột, mục lục 3 cột và mục lục 4 cột), mình có lưu cả đuôi file .doc lẫn .docx nên mong là phần mềm MS Word của các bạn đều mở được. Đối với mục lục được làm bằng code tạo bảng, thứ tự chương sẽ được xếp theo hàng ngang, riêng đối với mục lục 2 cột thì mình có làm thêm thứ tự chương xếp theo chiều dọc cho những truyện có từ 50 chương trở xuống. Thứ tự chương được mình đánh theo 2 kiểu là không có số 0 ở đằng trước và có số 0 ở đằng trước, các bạn thích kiểu nào thì dùng kiểu đó nhé macco Còn bây giờ, mình sẽ hướng dẫn các bạn tuỳ chỉnh để có mục lục đẹp hơn dựa trên code mục lục tạo sẵn này nhé cuoinherang

Lưu ý: Các code mục lục này sẽ được dán vào giao diện HTML của trình soạn thảo Cổ điển, nhưng điều này không đồng nghĩa với việc trình soạn thảo Block-Editor không sử dụng được code mục lục. Nếu muốn dùng code mục lục trên trình soạn thảo Block-Editor, các bạn hãy dùng khối Classic, không dùng khối Custom HTML nhé! Cách sử dụng khối Classic mình đã viết trong series Hướng dẫn WordPress cơ bản cho người mới bắt đầu rồi, các bạn có thể bấm vào ĐÂY để đọc lại.

4.1. Tuỳ chỉnh với mục lục đơn

Mục lục đơn là mục lục có dạng 1 dòng, như thế này:

Chương 1

Chương 2

Chương 3

Chương 4

Ở đây, mình sẽ hướng dẫn các bạn tuỳ chỉnh với mục lục đơn theo 3 kiểu, các bạn thích kiểu nào thì hãy bấm vào spoiler của kiểu đó để xem video hướng dẫn nhé cuoinherang

Bấm vào đây để xem video

Video 5. Tuỳ chỉnh với mục lục đơn (Kiểu 1)

Bấm vào đây để xem video

Video 6. Tuỳ chỉnh với mục lục đơn (Kiểu 2)

Bấm vào đây để xem video

Video 7. Tuỳ chỉnh với mục lục đơn (Kiểu 3)

4.2. Tuỳ chỉnh với mục lục được làm bằng code tạo bảng

Để tuỳ chỉnh với mục lục được làm bằng code tạo bảng thì các bạn hãy đọc hết phần Tạo bảng trên trình soạn thảo Cổ điển trong bài Chia cột và tạo bảng trên WordPress. Mình đã viết rất chi tiết ở bài đó rồi nên sẽ không viết gì thêm ở phần này nữa. Các bạn có thể xem video dưới đây để xem cách mình tuỳ chỉnh như thế nào nhé cuoinherang

Video 8. Tuỳ chỉnh với mục lục được làm bằng code tạo bảng

Vậy là mình đã hướng dẫn xong cách chèn liên kết ẩn và tạo mục lục thủ công bằng liên kết ẩn rồi like Hi vọng với các code mục lục có sẵn này, các bạn sẽ tiết kiệm được thời gian làm mục lục cũng như có được những mục lục truyện xinh xắn nhé hahaha Chúc các bạn thành công byebye

↑ Về bảng nội dung ↑

VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN!

Nguồn bài viết: https://wptutbyserahwang.wordpress.com/

184 responses »

Comment navigation

  1. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  2. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  3. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  4. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Liked by 1 person

  5. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  6. […] (Code bìa và mục lục được chia sẻ bởi Sera Hwang) […]

    Liked by 1 person

  7. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  8. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  9. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  10. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  11. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  12. chị ơi cho em hỏi khi chèn liên kết vào thì phần văn bản được chèn sẽ có gạch dưới với đổi màu, có cách nào làm cho nó không có gạch dưới hông chị?

    Liked by 2 people

    • Sera Hwang says:

      Có, nhưng với WordPress bản miễn phí thì em phải làm thủ công cho từng liên kết, và phải dùng code. Nếu em muốn thì chị sẽ chỉ code cho em nhé ^^

      Liked by 1 person

  13. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Liked by 1 person

  14. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Liked by 1 person

  15. Độc says:

    https://hamlancac.wordpress.com/2015/08/15/du-an-dich-nu-trong-sinh-ky-luc-nguyet-hao-tuyet/
    Chị ơi, làm sao để tạo được mục lục như trong link ạ? Kiểu lên máy tính nó là dạng bảng chia cột còn lên điện thoại nó sẽ xổ dọc xuống thành danh sách ấy ạ.
    Em cảm ơn ơn chị, chúc chị và gia đình năm mới vui vẻ ạ

    Liked by 1 person

    • Sera Hwang says:

      Thật ra mục lục nhà bạn ấy không phải tạo bằng cách dùng code bảng mà là dùng thuộc tính float để chia cột, và thêm code đường viền ở dưới mỗi tên chương nên em sẽ có cảm giác nhìn giống như mục lục được tạo bằng cách dùng code bảng. Vì vùng hiển thị bài đăng trên máy tính rộng hơn nên có thể chứa được 3 chương chứa thuộc tính float trên cùng 1 dòng, nhưng trên điện thoại thì vùng hiển thị bị thu hẹp lại nên chỉ chứa được 1 chương đầu, còn 2 chương chứa thuộc tính float còn lại sẽ bị đẩy xuống những dòng tiếp theo. Nếu em muốn chị sẽ dạy em viết code mục lục kiểu này nhé ^^

      Liked by 4 people

    • Độc says:

      Em cảm ơn chị nhiều, em sẵn sàng học rồi đây :3
      Em không tìm hiểu sâu về code nên chỉ thuộc dạng học vẹt thôi, mong được chị chỉ giáo thêm ạ :3

      Liked by 2 people

    • Sera Hwang says:

      Thế thì em cần phải tìm hiểu thêm về code HTML thì mới đọc hiểu và tuỳ chỉnh được code này. Em có thể đọc bài viết về code khung viền trong blog của chị để biết cách viết code đường viền và các thuộc tính như border, padding, margin,… và đọc cả bài Sơ lược về code HTML nữa. Đây là link code, em vào link này để copy code nhé: https://www.heypasteit.com/clip/0IVJYP
      Code ở trong link ở trên tương đương với 1 chương truyện, tức là nếu em có 30 chương thì em phải copy paste 30 lần đoạn code trong link.
      Những thuộc tính em cần chú ý nhất trong code này là thuộc tính widthheight. Đối với thuộc tính width, tuỳ thuộc vào độ rộng của vùng hiển thị bài đăng của theme và số cột em muốn chia thì giá trị của width sẽ tăng lên hoặc giảm đi. Ví dụ trong code mẫu thì chị mặc định width là 200px, với blog có vùng hiển thị bài đăng chỉ khoảng 430px thì code sẽ hiện được 2 cột, nhưng nếu vùng hiển thị bài đăng rộng tới 650px thì code sẽ hiện được 3 cột.
      Còn với thuộc tính height, ở đây chị mặc định giá trị của height là 25px. Nếu em giữ nguyên cỡ chữ là 14px trong code thì em không cần để ý đến thuộc tính này, nhưng nếu em thay đổi cỡ chữ thì em cũng phải chú ý điều chỉnh lại giá trị của height cho phù hợp, nhất là ở trường hợp tăng cỡ chữ lên quá lớn so với cỡ chữ mặc định 14px.
      Ngoài ra, ở trong code chị đã mặc định nội dung chỉ hiển thị trên 1 dòng, nếu nội dung dài hơn 1 dòng thì phần còn lại không hiển thị hết sẽ được tự động thay bằng dấu 3 chấm. Lý do là vì khi dùng thuộc tính float để chia cột thì nó sẽ không tự động căn chỉnh đường viền cho khớp nhau như khi dùng code bảng. Do đó, nếu 1 chương của em xuống dòng mà chương kế tiếp không xuống dòng thì đường kẻ bên dưới sẽ bị lệch. Nếu em không muốn hiển thị dấu 3 chấm mà muốn hiển thị hết cả phần nội dung dài hơn 1 dòng thì em hãy xoá 3 thuộc tính này trong code đi:
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
      đồng thời tăng giá trị height ở các chương tương ứng với các cột trong hàng đó.
      Ví dụ: Code của em có 3 cột, Chương 1 có nội dung nhiều hơn 1 dòng, nằm cùng hàng với Chương 1 là Chương 2 (tương ứng với cột 2) và Chương 3 (tương ứng với cột 3). Đầu tiên, em sẽ xoá 3 thuộc tính overflow, white-space, text-overflow như ở trên đi (xoá ở code của cả 3 chương 1, 2, 3). Sau đó điều chỉnh lại giá trị của thuộc tính height ở cả 3 đoạn code của chương 1, 2, 3. Thông thường em sẽ phải tăng giá trị của height lên gần gấp đôi giá trị ban đầu. Ví dụ, giá trị height ban đầu là 25px, sau khi điều chỉnh thì có thể tăng thành 45px.
      Với code mục lục kiểu này, em có thể copy paste từ đoạn code mẫu ban đầu thành n code theo số lượng chương truyện mà em mong muốn. Nhưng như thế thì hơi mệt chút, vì em sẽ phải chỉnh lại từng số thứ tự của chương. Do đó, em có thể dùng cách replace với code mục lục đơn như chị đã hướng dẫn trong bài này để tuỳ chỉnh code cho nhanh nhé ^^

      Liked by 4 people

    • Độc says:

      Em cảm ơn chị, em làm được rồi ạ ❤

      Like

  16. Chấp Niệm Nhất Sinh says:

    Chị ơi, cho em hỏi là mình có code viết cho chap Intro (chap 00) không ạ chị. Tại hiện tại truyện em làm có chap đấy mà em không thấy code cho chap đó ạ.

    Liked by 1 person

  17. chông in says:

    Chị ơi cho em hỏi cách làm mục lục truyện tranh như này với ạ https://staygoldstill.wordpress.com/portfolio/xuan-ha-nacchan-thu-dong-va-toi-sagan-sagan/ Không biết có phải dùng column không nhưng lúc phóng to còn có cả thanh cuộn ngang nữa ạ

    Like

  18. Zii says:

    Chào chị ạ, em muốn hỏi vài vấn đề ạ:
    1/ Làm sao để cho icon của blog động được ạ?
    2/ Cái gif trên chữ lalaland trong vid làm sao vậy ạ
    Link video: https://drive.google.com/file/d/1-xkxurKau43mCqyX-wsBJ130cdymtly9/view?usp=drivesdk
    3/ Với lại là chị có biết theme trong video trên không ạ? nếu có thì chỉ em với ạ
    em cảm ơn chị nhiều
    mong chị reply ạ 🥺

    Like

    • Sera Hwang says:

      Chị không xem được video em ạ, em mở chức năng chia sẻ video nhé ^^! Chị sẽ không xoá hay giấu bình luận nên em đừng spam nhé, vì chị bận nên chị chưa duyệt bình luận được ngay thôi ^^!

      Like

    • Zii says:

      dạ em chia sẻ rồi ạ, cảm ơn chị

      Like

  19. […] Nasir được đưa đến chỗ Agron như một món quà từ Batiatus. Agron bị thu hút bởi chàng trai trẻ nhưng anh sẽ không ngủ với người được ra lệnh để làm điều đó. Anh phải dồn hết sức kìm nén sự chú ý của mình đối với Nasir. Và Nasir cũng phải cố gắng để hiểu được Agron. Mục Lục Chương 01 | Chương 02 | Chương 03 Chương 04 | Chương 05 | Chương 06 Chương 07 | Chương 08 | Chương 09 Chương 10 | Chương 11 | Chương 12 Chương 13 | Chương 14 | Chương 15 Chương 16 | Chương 17 | Chương 18 Chương 19 | Chương 20 | Chương 21 … (Hoàn) (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Liked by 2 people

  20. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  21. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  22. Băng Băng says:

    Chị ơi truyện của em gần 5000 ngàn chương lận, chị cho em xin code với ạ ❤

    Like

  23. Chị ơi, em làm wordpress truyện ấy làm sao để lên kết mấy chương chuyện để cuối chương có chương trước chương sau với mục lục để đỡ phải làm link ẩn ấy ạ

    Like

  24. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  25. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  26. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  27. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  28. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  29. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  30. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  31. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  32. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  33. -fidelia says:

    Chị ơi, cho em hỏi làm sao để code mục lục như link ạ? Em cảm ơn chị nhiều.
    https://muoivantue.com/2019/01/18/dam-my-hinh-xam/

    Like

  34. […] (Code mục lục và viền được chia sẻ bởi Sera Hwang) […]

    Like

  35. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  36. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

  37. […] (Code mục lục được chia sẻ bởi Sera Hwang) […]

    Like

Comment navigation

🌸 Gửi bình luận 😁 . Vui lòng viết tiếng Việt có dấu, không viết teencode và các thể loại viết tắt hại não khác 😰. Những phản hồi không dấu, viết tắt (dù chỉ là một từ) và chứa teencode hại não sẽ không được xét duyệt và bị xóa ngay lập tức! 😌 Để chèn hình ảnh hoặc emo vào comment, các bạn chỉ cần paste link của hình ảnh hoặc emo đó vào comment là được, khi xét duyệt phản hồi sẽ tự động chuyển thành hình ảnh hoặc emo tương ứng 😘 Không chèn code vào bình luận vì code không hiển thị được đâu 🤣 Dạo này công việc của mình khá bận, không online thường xuyên được nên các bạn thông cảm nhé 😊

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s