Tạo mục lục -Table of content trong bài viết cho blogspot

5/30/2021
Hướng dẫn cài đặt mục lục cho blogspot-Khi khách truy cập web/blog thì 95% người đọc sẽ tìm đến phần Mục lục (Table of Content) để xem trước và định hình cấu trúc bài viết. Đối với blog bạn cũng thường thấy mục lục ở những bài có nội dung dài và được chia ra làm nhiều mục lớn nhỏ.

Với những bài viết dài, phân chia nội dung theo chủ đề, tác giả sẽ thường xây dựng một mục lục để liên kết nội dung con giúp người đọc nhanh chóng chuyển đến nơi, chương bài mình muốn. Vậy họ đã làm điều đó như thế nào?

Với blogspot thì việc này cần phải làm theo cách thủ công với việc trong khi viết bài cần phân chia các mục thông qua các thẻ h2 h3 h4 h5 h6 (nôm na là cha con cháu chắt chút...) Ví dụ một cấu trúc như sau:

Bài viết có 3 mục lớn coi như là mục cha, mỗi tiêu đè mục này sẽ bao bao bằng thẻ h2. Trong mỗi mục lớn ví dụ có 2 mục con, mỗi tiêu đề mục con bao bằng thẻ h3. Trong mỗi mục con có 2 mục cháu, mỗi tiêu đề mục cháu bao bằng thẻ h4. Nếu có chắt thì bao bằng thẻ h5....Chỉ tới h6 thôi nhé(chút).
Tạo mục lục -Table of content trong bài viết cho blogspot

Hướng dẫn cài đặt mục lục cho blogspot

Bước 1: Thêm css

Thêm css cho blog bằng cách dán đoạn css sau vào trước ]]></b:skin> hoặc </style> tùy theo template
/* Post toc css */
.posttoc{border:1px solid #ddd;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;display:block;width:70%;}
.posttoc button{background:transparent; font-size:22px;position:relative; outline:none;border:none; padding:0 0 0 15px;}
.posttoc button a {padding:0px 2px;cursor:pointer;} 
.posttoc button a:hover{ text-decoration:underline; } 
.posttoc button span {font-size:15px; margin:0px 10px; }
.posttoc li{margin:10px 0;  } 
.posttoc li a {text-decoration:none; font-size:18px; text-transform:capitalize;} 
.posttoc li a:hover {text-decoration: underline;}
.posttoc li li {margin:4px 0px;} 
.posttoc li li a{font-size:15px;}
.posttoc ol{counter-reset:section1;list-style:none}
.posttoc ol ol{counter-reset:section2}
.posttoc ol ol ol{counter-reset:section3}
.posttoc ol ol ol ol{counter-reset:section4}
.posttoc ol ol ol ol ol{counter-reset:section5}
.posttoc li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.posttoc li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.posttoc li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.posttoc li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.posttoc li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}

Bước 2: Thêm javascript

Dán đoạn javascript sau vào trước </head>
<script> 
//<![CDATA[ 
function POSTTOC(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("POSTTOC").innerHTML+=c}function Toggletoc(){var a=document.getElementById("POSTTOC"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="Hide"):(a.style.display="none",b.innerHTML="Show")} 
//]]> 
</script>

Bước 3: Sửa <data:post.body/>

Tìm thẻ <data:post.body/> và sửa nó thành
<div id='post-toc'><data:post.body/></div>

Khi viết bài

Khi viết đặt code sau vào ngay đầu bài viết hoặc sau vài dòng cũng được
<div class="posttoc"> 
<button>Mục lục <span>[<a onclick="Toggletoc()"  id="Tog">Hide</a>]</span></button> 
<div id="POSTTOC"></div> 
</div>
Việc sau cùng là dán code sau vào cuối bài viết để gọi javascript

<script>POSTTOC();</script>

Theo:mybloggertricks

Ads in post custom1