Cách thêm Mục lục tự động cho bài viết Blogspot cực đẹp

Các bài viết chất lượng hiện nay thông thường sẽ bao gồm rất nhiều nội dung chuyên sâu vào một vấn đề chính để giúp người đọc có thêm nhiều thông tin hơn. Ngoài ra, nội dung chất lượng còn giúp Google đánh giá cao website của bạn vì chưa nhiều thông tin hữu ích. Bài viết quá dài cũng sẽ khiến cho người đọc bị rối và khó tìm nội dung mình mong muốn, vì thế chúng ta cần tạo mục lục cho bài viết (TOC - table of contents) để người dùng có thể biết nội dung bài viết bao gồm những gì và tiến đến phần cần đọc nhanh nhất.

Trong bài viết này, Accpremium.Com sẽ hướng dẫn cho các bận cách tạo mục lục bài viết cho Blogspot và đặc biệt là mục lục này sẽ tự động nhận diện các thẻ <head> trong bài viết.

Những lợi ích của mục lục cho bài viết

Tạo mục lục cho bài viết (TOC) sẽ mang lại những lợi ích sau.
  1. Giúp bài viết trong gọn gàng, chuyên nghiệp hơn.
  2. Bài viết sẽ chuẩn SEO hơn khi các bot thu thập dữ liệu sẽ dễ dàng nắm rõ nội dung trong bài viết.
  3. Người đọc sẽ tìm nội dung mong muốn nhanh hơn.
  4. Dễ dàng quản lí nội dung.
  5. Cải thiện thời gian on-page.
  6. Giảm tỉ lệ bouncerate (thoát trang).

Hướng dẫn tạo mục lục tự động cho bài viết Blogspot

Tạo mục lục cho bài viết trong Blogspot rất đơn giản, các bạn hãy làm theo các bước dưới đây nhé.

Bước 1: Copy và paste đoạn mã sau vào phía dưới thẻ <head>.

Mẹo: dùng tổ hợp phím Ctrl + F để tìm cho nhanh nhé!.

   <script type='text/javascript'> //<![CDATA[ //*************TOC plugin was customized by Giahuyblog.com
            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>
Bước 2: Paste đoạn CSS sau vào trước thẻ đóng ]]></b:skin>.
/*####Automatic TOC was customized by Giahuyblog.com*/
        .mbtTOC {
            border: 3px solid #A2A9B1;
            box-shadow: 1px 1px 0 #EDE396;
            background-color: #F8F9FA;
            color: #830000;
            line-height: 1.4em;
            margin: 30px auto;
            padding: 20px 30px 20px 10px;
            font-family: Open Sans, arial;
            display: block;
            width: 70%;
            border-radius: 5px;
        }
        .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: none;
            font-family: Open Sans, arial;
            font-size: 20px;
            position: relative;
            outline: none;
            cursor: pointer;
            border: none;
            color: #3A3A3A;
            padding: 0 0 0 15px;
        }
        
Bước 3: Copy và paste đoạn code sau và thay thế cho <data:post.body/>.
<div id="post-toc"><data:post.body/></div>

Một số template sẽ có nhiều thẻ <data:post.body/> nên hãy thay thế toàn bộ nhé!.

Sau khi đã chỉnh sửa rồi thì hãy lưu template lại.

Hướng dẫn sử dụng mục lục

Sau khi đã cài đặt hoàn tất rồi thì chúng ta sẽ sử dụng mục lục như sau.

Copy đoạn code này > đến phần chỉnh sửa HTML của bài viết bạn muốn thêm mục lục.
<div class="mbtTOC">
 <button onclick="mbtToggle()">Mục lục</button>
 <ol id="mbtTOC"></ol>
 </div>
Và copy đoạn code này paste xuống dưới cùng của phần chỉnh sửa HTML bài viết.
<script>mbtTOC();</script>
Lưu bài viết lại là xong.

Tùy chỉnh mục lục theo ý muốn

Bạn có thể bỏ qua phần này cũng được.

Thay đổi màu sắc, phông chữ

Để thay đổi màu sắc và phông chữ, bạn chỉ cần tìm mã màu và phông chữ muốn chỉnh sửa trong đoạn CSS đã dán vào thẻ đóng ]]></b:skin.

Thay tên mục lục

Bạn có thể thay đổi tên mục lục trong đoạn code đã paste vào đầu phần HTML của bài viết.

Kết thúc bài viết

Việc tạo mục lục cho bài viết chỉ đơn giản như vật, nếu bạn có thắc mắc gì hãy bình luận bên dưới bài viết để mình hỗ trợ nhanh nhất. Cảm ơn bạn đã ghé thăm website.

*

Post a Comment (0)
Previous Post Next Post