(̣̣̣̣̣̣ New 2025 ) - Mục lục cho bài viết trong Blogger

Đây là mục lục cho các nội dung nằm trên cùng một bài viết, tức là có chung một địa chỉ web (URL). Vậy làm thế nào để trình duyệt phân biệt mục nào với mục nào để chuyển đến khi bạn click vào? Lúc này bạn sẽ dùng một kỹ thuật để đánh dấu (bookmark) đoạn nào cần chuyển đến, và link để đến đúng đoạn đó sẽ có dạng:

http://www.website.com/abc.html#bookmark

Trong đó http://www.website.com/abc.html là địa chỉ trang web, dấu "#" là dấu để chỉ cho trình duyệt biết phần phía sau là bookmark, là địa danh cần tới trong trang web, còn "bookmark" là tên của địa điểm bạn muốn tới trong trang web đó.

Với WordPress, bạn có thể gán bookmark nhanh chóng với một công cụ hỗ trợ ngay trong vùng soạn thảo là Anchor. Muốn chèn bookmark ở đâu bạn chỉ cần gắn Anchor ở đó.

Còn với Blogger bạn sẽ phải thao tác bằng tay. Nhưng việc này cũng đơn giản thôi, tôi sẽ chỉ cho bạn dưới đây.

Để tạo mục lục chúng ta sẽ phải thực hiện 3 bước chính:

1) Tạo mục lục

Bài viết có 10 phân mục quan trọng và tôi đặt tên cho chúng như sau:

Bạn có thể tạo danh sách này bằng công cụ hỗ trợ trong khi soạn thảo với Blogger

Lúc ban đầu mới tạo thì Mục lục có dạng sau (chưa có link chèn vào)

2) Định dạng các Đầu Mục

Chúng ta quy ước là các Đầu Mục trong Mục lục sẽ được định dạng về Subheading (tức <h3>trong HTML) để sau này dễ tìm để thêm bookmark cũng như chỉnh xóa sửa. Như trong bài chúng ta chỉ có 10 Đầu Mục, tức 10 thẻ <h3>. Việc tìm kiếm 10 thẻ này trong toàn bộ codeHTML sẽ đơn giản hơn nhiều so với khi chúng ta không định dạng chúng.

Để định dạng Đầu Mục thì bạn đặt con trỏ chuột ở hàng chữ đó (đâu cũng được, miễn là trên cùng một dòng đó), rồi nhấn hộp combo box phía trên và chọn Subheading

... lúc đó dòng chữ sẽ được định dạng nổi bật lên...

Bạn có thể tiếp tục định dạng kiểu màu sắc, kích thước,v.v... nhưng vấn đề chính là các Đầu Mục của ta giờ đã là Subheading - <h3>

3) Chèn bookmark

Bây giờ bạn sẽ cần chèn bookmark vào 10 phần tương ứng trong bài viết. Các đầu mục này đã được định dạng là Subheading (tức <h3> trong HTML)

Để chèn bookmark thì bạn sẽ chèn thẻ sau vào đầu mục tương ứng:

<a name="???"></a>

trong đó ??? sẽ là tên bookmark bạn đặt, và nó phải là duy nhất, không trùng lặp với bookmark khác trong bài (nếu 2 bookmark cùng tên thì trình duyệt biết chuyển đến đâu khi bạn click?)

Đầu tiên bạn phải chuyển sang kiểu soạn thảo HTML...

.... rồi tìm đến đoạn muốn chèn bookmark. Trong ví dụ này, mục 1) YouTube’s Autocompletetôi sẽ đặt tên bookmark là youtubeautocomplete. Vậy bạn chỉ cần dán...

<a name="youtubeautocomplete"></a>

... vào ngay sau đoạn tiêu đề đó như thế này...

Tiếp tục thực hiện với các đầu mục còn lại, nhớ là mỗi cái một tên, không trùng nhau.

Mẹo: khi tìm kiếm trong kiểu soạn thảo HTML bạn sẽ gặp khó khăn vì cả trang web sẽ hiện lên dưới dạng plain text, bạn khó định hình được phần nào mình muốn chèn. Mẹo ở đây là bạn tìm tới thẻ có tên </h3> và dán mã bookmark vào sau nó. Vì </h3> là Subheading, tức là những đầu mục bạn muốn làm mục lục, nên trong cả bài sẽ chỉ có 10 Subheading. Bạn tìm đến </h3>bằng tổ hợp Ctrl-F rồi nhập vào </h3>

...lúc đó con trỏ sẽ tìm tới đúng tiêu đề bạn muốn tạo mục lục, và bạn chỉ cần điền vào tên bookmark.

4) Chèn link bookmark vào Mục lục

Sau khi đã đặt bookmark ở 10 Đầu mục chính xong, giờ là lúc bạn chèn link cho Mục lục của mình.

Với Đầu mục đã có bookmark, mặc nhiên nó đã có một địa chỉ web riêng của mình, và URL đó là : diachiweb#bookmark, trong ví dụ trên, Đầu Mục thứ nhất sẽ có URL là

http://www.vosau.com/2016/06/best-youtube-keywords-research-tools.html#youtubeautocomplete

...trong đó youtubeautocomplete chính là bookmark bạn vừa đặt ở bước trên, còn http://www.vosau.com/2016/06/best-youtube-keywords-research-tools.html là địa chỉ của trang web.

Bạn tự hỏi là bài viết chưa xong thì lấy đâu ra địa chỉ mà dùng. Thật ra thì ngay khi soạn bài Blogger đã chuẩn bị sẵn địa chỉ bài post cho bạn ở cột Post settings ở bên phải, click vào Permalink rồi copy địa chỉ có sẵn.

Chú ý: bạn có thể tùy chỉnh URL cho bài viết trong lúc soạn thảo. Đây là cách rất hay để SEO, nhưng bạn chỉ có thể tùy chỉnh một lần duy nhất trong lúc soạn bài. Còn sau khi bài đã được đăng thì bạn không thể sửa URL được nữa.

Để chèn link cho mục lục bạn bôi đen dòng chữ rồi click vào chữ Link

...rồi sau đó dán địa chỉ web vừa copy ở trên vào. Chèn tiếp dấu thăng "#" rồi cuối cùng là tênbookmark của Đầu Mục đó...

Bạn nhớ bỏ trống 2 ô check phía dưới vì bạn không muốn nó mở ra một cửa sổ mới cũng như không muốn link là nofollow.

Tiếp tục thực hiện với các đầu mục còn lại. Và kết quả...

Vậy là xong rồi đấy. Bạn đã có một mục lục chuyên nghiệp, giúp bố cục trang web sáng sủa, thân thiện và dễ đọc hơn, cũng như quan trọng nhất là bạn đã SEO on-page một cách chất lượng.

Việc thực hiện này không rườm rà như cách tôi trình bày đâu, và chỉ cần làm 2 lần là bạn sẽ thành thục. Hãy cố gắng mỗi trang viết đều có mục lục, bạn sẽ thấy hiệu quả của việc này lên thứ hạng web thay đổi tích cực thế nào.

Thêm Table of Content vào bài viết

Các bạn vào phần quản lý của Blogger, tiếp theo chọn Theme \ Edit HTML. Sau đó nhấn tổ hợp phím Ctrl + F, và tìm chuỗi <data:post.body/>. Thay thế <data:post.body/> bằng đoạn code sau đây:

<div id='post_content'>
<div id='box-container'>
<div class='header-container'>
<p class='title-header-container'> Nội Dung Bài Viết </p>

</div>
<nav class='table-container'>
<ul id='list-heading' />
</nav>
</div>
<data:post.body/>
<script type='text/javascript'>
//<![CDATA[
getHeading();
//]]>
</script>
</div>

Trong đó <div id='box-container'> chứa Table of Contents gồm:

<div class='header-container'> là phần header
<nav class='table-container'> là phần chứa danh sách liên kết

Thiết kế giao diện Table of Contents

Để tạo giao diện của Table of Content, các bạn vào phần quản lý Blogger và chọn Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi ]]></b:skin>:

Và dán đoạn code CSS sau đây vào trên vị trí vừa tìm gặp.

/*-- Table of Contents CSS by tips.vn --*/

#box-container{

border: 1px solid #3355FF;

border-radius: 7px;

margin: 20px 0px;

width: auto;

display: table;

padding: 10px;

position: relative;

box-shadow: 0.5px 2px 5px #2255ff;

color: #3355FF;

font-weight: 600;

}

.header-container{

display:flex;

width: 100%;

}

#box-container p.title-header-container{

margin-right: 10px;

border-bottom: 2px solid #FF3F33;

margin: 0px 10px 0px 0px;

width: 100%;

}

.icon-header-container{

display: table-cell;

border: 1px solid #bbb;

padding: 1px 5px;

border-radius: 5px;

}

#box-container ul li {

font-size: 95%;

}

#box-container a:hover{

color: #d33;

}

#box-container a {

color: #000;

box-shadow: none;

text-decoration: none;

text-shadow: none;

}

#box-container li.Level-H3{

margin-left: 30px;

}

#box-container li.Level-H4{

margin-left: 60px;

}

/*-- End Table of Contents CSS --*/

Nếu các bạn muốn biết mỗi đoạn CSS trên có ảnh hưởng đến Table of Contents thế nào thì xem chi tiết ở video đầu bài viết nhé.

Xây dựng hàm cho Table of Contents

Các bạn tiếp tục vào phần quản lý Blogger và chọn Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi </head>. Dán đoạn code jQuery sau đây vào trên thẻ </head>.

//<![CDATA[

function getHeading(){

var htag = "";

$("#post_content h2, #post_content h3, #post_content h4").each(function(i){

$(this).attr("id", "point_" + i);

htag += '<li class="Level-' + $(this).get(0).tagName + '"><a href="#point_' + i + '">' + $(this).html() + '</a></li>';

});

$('#list-heading').append(htag);

}

function lstToggle(){

$('#list-heading').slideToggle('slow');

}

//]]>

</script>

Cuối cùng các bạn lưu lại và load lại bài viết xem thành quả nhé.