Hướng dẫn cách tạo mục lục tự động đẹp mắt trên Blogspot, giúp bài viết chuyên nghiệp, thân thiện người đọc và tối ưu SEO. Bạn sẽ học cách chèn mã HTML, CSS đơn giản và tùy chỉnh giao diện theo phong cách riêng. Tăng thẩm mỹ và cải thiện trải nghiệm blog dễ dàng!
{tocify} $title = {Mục lục bài viết}Mục lục bài viết là gì?
.webp "cách tạo mục lục tự động")
Cách tạo mục lục nhỏ gọn cuộn theo trang:
.webp "cách tạo mục lục tự động")
Bước 1: Thêm Javascript
<b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>//<![CDATA[// Hiện mục lục khi click vào buttonvar pcbcontainer = $(".mucluc-dropdown-list_menu"),pcbbutton = $(".mucluc-dropdown-list_button");$(function() {pcbbutton.click(function() {if (pcbcontainer.is(":hidden")) {pcbcontainer.slideDown(200);} else {pcbcontainer.fadeOut(200);}});});$(document).mouseup(function(e) {if (!pcbcontainer.is(e.target) && pcbcontainer.has(e.target).length === 0) {pcbcontainer.fadeOut(200);}});// Kéo xuống 1000px sẽ hiện button show mục lục$(document).scroll(function() {var y = $(this).scrollTop();if (y > 1000) { // Thay 1000 bằng khoảng cách tính từ trên xuống, đơn vị pixel$('#mucluc-dropdown-list').fadeIn();} else {$('#mucluc-dropdown-list').fadeOut();}});//]]></script></b:if>
Bước 2: Thêm CSS
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/><b:if cond='data:blog.pageType == "item"'><style>#mucluc-dropdown-list {position:fixed;left:0;top:200px;z-index:999999;width:350px;display:none;text-align:left;}a.mucluc-dropdown-list_button {text-align:left;text-decoration:none;}a.mucluc-dropdown-list_button:hover {text-decoration:none !important;}a.mucluc-dropdown-list_button:before {content:"\f03a";font-family:fontawesome;background:#fff;color:#468bf5;font-size:20px;width:35px;height:35px;display:inline-block;line-height:38px;text-align:center;border:1px solid #ddd;}.mucluc-dropdown-list_menu {display:none;margin:5 !important;background:#f5f5f5;border:3px solid #ddd;text-align: left;}</style></b:if>
Bước 3: Thêm thư viện jquery
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
Bước 4: Thêm mục lục vào bài viết
<div id="mucluc-dropdown-list"><a class="mucluc-dropdown-list_button" href="javascript:;"></a><ul class="mucluc-dropdown-list_menu">Nội Dung Chính Bài Viết:<li><a href="#buoc1">Tiêu đề nội dung</a></li><li><a href="#buoc2">Tiêu đề nội dung</a></li><li><a href="#buoc3">Tiêu đề nội dung</a></li><li><a href="#buoc4">Tiêu đề nội dung</a></li><li><a href="#buoc5">Tiêu đề nội dung</a></li></ul></div>
Bước 5: Cuối cùng
Thêm id="..." vào đầu mục từng thẻ tiêu đề trong bài viết H2 và H3
Cách tạo mục lục tự động:
Bước 1: Thêm CSS
post-body ul{padding:0 0 0 15px;margin:10px 0}.rtl .post-body ul{padding:0 15px 0 0}.post-body li{margin:5px 0;padding:0}.post-body ul li,.post-body ol ul li{list-style:none}.post-body ul li:before{display:inline-block;content:'\2022';margin:0 5px 0 0}.rtl .post-body ul li:before{margin:0 0 0 5px}.post-body ol{counter-reset:ify;padding:0 0 0 15px;margin:10px 0}.rtl .post-body ol{padding:0 15px 0 0}.post-body ol > li{counter-increment:ify;list-style:none}.post-body ol > li:before{display:inline-block;content:counters(ify,'.')'.';margin:0 5px 0 0}.rtl .post-body ol > li:before{margin:0 0 0 5px}#toc li a{color:#4285f4;font-weight:normal}.tocify-wrap{display:block;width:100%;clear:both;margin:0}.tocify-inner{position:relative;max-width:100%;background-color:rgba(155,155,155,0.05);display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:var(--title-color);line-height:1.6em;border-radius:4px}a.tocify-title{position:relative;height:58px;background-color:rgba(155,155,155,0.05);font-size:24px;color:#344955;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:4px}a.tocify-title.is-expanded{border-radius:4px 4px 0 0}.tocify-title:after{content:'\2261';font-size:18px;font-weight:400;margin:0 0 0 25px}.rtl .tocify-title:after{margin:0 25px 0 0}.tocify-title.is-expanded:after{font-weight:900}a.tocify-title:hover{text-decoration:none}#toc{display:none;padding:8px 15px;margin:0}#toc ol{padding:0 0 0 15px}.rtl #toc ol{padding:0 15px 0 0}#toc li{font-size:14px;margin:7px 0}#toc li a:hover{color:#4285f4;text-decoration:underline}
Bước 2: Thêm JS
Các bạn copy đoạn JS bên dưới dán trước thẻ đóng </body> và lưu lại.
<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
function shortCodeIfy(t,n,i){for(var e=t.split("$"),o=/[^{\}]+(?=})/g,c=0;c<e.length;c++){var a=e[c].split("=");if(a[0].trim()==n)return null!=(i=a[1]).match(o)&&String(i.match(o)).trim()}return!1}!function(t){"use strict";var n=function(n){return this.each(function(){var i,e,o=t(this),c=o.data(),a=[o],r=this.tagName,s=0;i=t.extend({content:"body",headings:"h1,h2,h3"},{content:c.toc||void 0,headings:c.tocHeadings||void 0},n),e=i.headings.split(","),t(i.content).find(i.headings).attr("id",function(n,i){return i||function(t){0===t.length&&(t="?");for(var n=t.replace(/\s+/g,"_"),i="",e=1;null!==document.getElementById(n+i);)i="_"+e++;return n+i}(t(this).text())}).each(function(){var n=t(this),i=t.map(e,function(t,i){return n.is(t)?i:void 0})[0];if(i>s){var o=a[0].children("li:last")[0];o&&a.unshift(t("<"+r+"/>").appendTo(o))}else a.splice(0,Math.min(s-i,Math.max(a.length-1,0)));t("<li/>").appendTo(a[0]).append(t("<a/>").text(n.text()).attr("href","#"+n.attr("id"))),s=i})})},i=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn.toc=i,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery),$(".post-body b").each(function(){var t=$(this),n=t.text();n.toLowerCase().trim().match("{tocify}")&&(n=0!=shortCodeIfy(n,"title")?shortCodeIfy(n,"title"):"Table of Contents",t.replaceWith('<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+n+'">'+n+'</a><ol id="toc"></ol></div></div>'),$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#toc").slideToggle(170)})}),$("#toc").toc({content:".post-body",headings:"h2,h3,h4"}),$("#toc li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")).offset().top-20},500),!1})}))});
//]]>
</script>
</b:if>
.webp)
.webp)
.webp)
.webp&description=Cách tạo mục lục tự động hiển thị đẹp mắt trong Blogspot){kind=link}
0 Nhận xét