Chia sẻ code Table Content (mục lục bài viết) tự động cho blogspot

Sử dụng mỏ neo đã phát triển khá lâu và nhiều mã nguồn đã áp dụng rất tốt, Ngoài ra mỏ neo cũng khá tốt với ae làm S.E.O. Thường thì ae làm WP thì có nhiều plugin hỗ trợ, còn với ae Blogger thì toàn làm bằng tay, Trước đây có hứa làm cho ae trong nhóm nhưng giờ mới có thời gian làm. ( Thật ra chưa đầu tư cho nó lắm nên hơi xấu, ae nào copy về làm đẹp có thể sửa lại css giúp mình cho thành ver 2 .

XEM DEMO

Hướng dẫn: copy và dán vào vị trí bạn muốn hiển thị mục lục bài viết. Mục lục tự động sẽ nhận tự động tất cả thẻ H1,H2,H3,H4,H5...

<b:if cond='data:blog.pageType == "item"'>
<script>
function index() {
var index =
"<ul id='tocid1'>" +
"<li id='tocid'><b>Mục lục bài viết</b></li>";
$("h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6").each(function() {
el = $(this);
title = el.text();
id = "#" + el.text().replace(/\s/g, "");
hid = el.text().replace(/\s/g, "");
el.attr('id', "" + hid + "");
lHeaders =
"<li class='tocid'>\n" +
"<a href='" + id + "' title='" + title + "'>" + title +
"</a>\n" +
"</li>\n";
index += lHeaders;
});
index +=
"</ul>";
$(".article1").prepend(index);
$('#toc').remove();
$('#tocbuttonstyle').remove();
}
window.onload = index;
$(window).scroll(function() {
$("#slidebox").css($(this).scrollTop() > 700 ? {
right: "0px"
} : {
right: "-360px"
});
}), $(document).ready(function() {
var i = $("#slidebox"),
s = $("#slidebox-close"),
o = $("#slidebox-minimize"),
l = $("#slidebox-maximize");
});
</script>
<div class='show'><div class='article1'/></div>
<style>
/* Widget table Content */
.show {width: 70%;background-color:#f9f9f9;border:1px solid #CCC;padding: 0 0 5px 0;margin-bottom: 15px;display: block; margin-left: auto; margin-right: auto;}
.article1 {}
#tocid1 {padding:0;margin:0;}
#tocid {border-bottom: 1px solid #ccc;text-align:center;margin-bottom:5px;padding: 5px 0;font-size:14px;list-style-type:none;}
li.tocid {padding: 3px 10px 3px 20px;list-style-type:none;}
</style>
</b:if>