Cách thêm thanh Mục Lục trong Blogger 2022

Thêm thanh Mục Lục trong Blogger là có thể. Trong bài đăng này, tôi sẽ trình bày Cách thêm Mục lục trong Blogger hoặc Blogspot bằng cách sử dụng TOC javascript.

Cách thêm thanh Mục Lục trong Blogger 2021

Chào mừng các Blogger, trong bài đăng blog này, tôi sẽ trình bày cách thêm mục lục vào bài đăng trên Blogger hoặc Blogspot.

Như bạn đã biết Google Blogger hoặc Blogspot không cho phép các plugin như WordPress, Tuy nhiên, với sự trợ giúp của bài đăng này, bạn có thể dễ dàng tạo Bảng nội dung nhẹ cho bài đăng trên blog của mình. Vì vậy, trong bài đăng này, tôi sẽ trình bày phương pháp từng bước để cài đặt TOC cho bài đăng trên blog và các trang của bạn.

Mục lục là gì?

Mục lục hoặc TOC là một phần nội dung nhỏ ở định dạng bảng thường được nhìn thấy trước phần đầu tiên của một bài đăng hoặc bài viết. Nó liệt kê tất cả các tiêu đề hoặc tiêu đề phụ của các bài đăng hoặc bài viết của bạn trong một bảng.

Mục lục Tự động là gì?

Mục lục tự động cho phép chúng tôi sắp xếp tất cả các tiêu đề và thẻ tiêu đề phụ từ bài đăng trên blog của bạn một cách tự động mà không cần mô tả các thẻ tiêu đề theo cách thủ công và biến nó thành một bảng dễ chịu để khán giả của bạn điều hướng.

Bất cứ khi nào bạn truy cập Wikipedia, bạn sẽ tìm thấy TOC trên mỗi và mọi bài báo bạn đọc, đúng không! Nó không làm cho chúng ta đơn giản để khám phá bài viết và nhảy trực tiếp vào đoạn văn hoặc điểm cụ thể đó sao?

Rõ ràng là có, và vì Wikipedia tự động chọn các nhãn tiêu đề và chuẩn bị Mục lục từ đó.

Lợi ích của việc sử dụng Mục lục là gì?

Như bạn biết rằng TOC xuất hiện ngay phía trên đầu bài đăng của bạn ngay sau đoạn đầu tiên. Khán giả của bạn có thể chỉ cần chiếm một vài dòng trên trang đầu của toàn bộ bài đăng của bạn.
Do đó, một Mục lục được lập kế hoạch tốt có thể giúp ích bất lợi trong việc:

• Mang lại một cái nhìn chuyên nghiệp cho bài đăng hoặc bài viết của bạn.
• Sắp xếp các điểm của bài đăng hoặc bài viết của bạn một cách có hệ thống.
• Quản lý kỳ vọng của khán giả, vì nó cung cấp chế độ xem cấp cao về các bài đăng hoặc bài viết của bạn.
• Cung cấp một lộ trình để khán giả dễ dàng điều hướng toàn bộ bài đăng hoặc bài viết của bạn.

TOC có thể cải thiện trải nghiệm người dùng không?

Trải nghiệm người dùng là một phần quan trọng của một bài đăng hoặc bài viết trên blog, điều mà nhiều Blogger ngày nay không coi trọng.

Bạn có biết, theo nghiên cứu, trải nghiệm người dùng là chìa khóa để có được thứ hạng cao hơn trong SERP. Và để cải thiện trải nghiệm người dùng trên blog của bạn, bảng Nội dung sẽ giúp ích.

Theo nghiên cứu, hơn 80% tổng số người đọc web chỉ đọc những điểm quan trọng của một bài đăng trên blog hoặc bài báo. Chỉ nên triển khai TOC khi độ dài của bài viết hoặc bài đăng đủ tốt và bài viết hoặc bài đăng có nhiều hơn 3 đề mục.

Mục lục có cải thiện SEO không?

Tất nhiên, Bảng nội dung cũng có thể giúp ích trong SEO. Kiểm tra các lý do –

Khi bạn viết một bài đăng hoặc bài báo dài và tạo một bảng Nội dung, nội dung của bạn sẽ được chia thành các phần phụ, mỗi phần có các khía cạnh khác nhau về cùng một chủ đề.

Vì vậy, với một bài đăng trên blog hoặc bài báo dài hơn, blog của bạn có khả năng xếp hạng tốt hơn trong các công cụ tìm kiếm và Bạn có biết rằng Google coi bài đăng dài hơn là một yếu tố xếp hạng.

Nó cũng làm tăng Tỷ lệ Nhấp qua hoặc CTR của trang web của bạn khi Google hiển thị ‘Liên kết Chuyển đến Phần’ được thu thập từ Mục lục của bài đăng hoặc bài viết trên blog của bạn và hiển thị kết quả phù hợp nhất cho người dùng.

Các tính năng của Plugin TOC này

• Plugin này được mã hóa bằng JavaScript và CSS.
• Nó đã được thiết kế theo cách mà nó sẽ không tải cho đến khi toàn bộ trang web của bạn được tải.
• Nó nhẹ và sẽ không ảnh hưởng đến thời gian tải trang của bạn.
• Plugin này thân thiện với SEO và sẽ giúp xếp hạng trang của bạn trong các công cụ tìm kiếm.
• Plugin này chứa một nút bật tắt để ẩn và hiện TOC.
• Nó có khả năng tùy biến cao và đáp ứng.
• Phần tốt nhất là, plugin này chỉ thực thi khi được gọi. Đó là bạn có thể bật hoặc tắt TOC trên một trang hoặc bài đăng cụ thể.

Lời khuyên – Bạn nên sao lưu mẫu hiện có của mình trước khi tùy chỉnh hoặc thực hiện các thay đổi đối với mẫu của mình vì nếu có sự cố, bạn có thể khôi phục mẫu ban đầu của mình.

Làm theo các bước dưới đây để thêm TOC trong Blogger:

Cách Thêm thanh Mục Lục trong Blogger

Bây giờ, hãy tìm kiếm </head> và dán đoạn mã bên dưới ngay trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>

4. Bây giờ tìm kiếm ]]> </ b: skin> và dán đoạn mã CSS sau vào ngay trên ]]> </ b: skin> dòng.

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}


5. Cuối cùng tìm kiếm thẻ <data: post.body /> , có thể có nhiều hơn 1 thẻ <data: post.body /> , Thay thế tất cả chúng bằng mã bên dưới.

<div id="post-toc"><data:post.body/></div>

Click vào "LƯU" là xong!

Làm thế nào để hiển thị TOC trong bài đăng trên blog?

Để kích hoạt plugin TOC, hãy dán mã Javascript bên dưới sau khi kết thúc bài đăng của bạn.

Nhấn vào nút Xuất bản! TOC đã được tạo thành công

<script>mbtTOC();</script>

Phần kết luận

Hy vọng bạn thấy bài viết này về Cách thêm thanh Mục Lục trong Blogger hữu ích. Nếu bạn gặp bất kỳ lỗi hoặc vấn đề nào, hãy bình luận bên dưới và tôi sẽ giúp bạn tìm ra nó.