Cách tạo mục lục trong Blogspot

CNTTLS | Mục lục là một danh sách bao gồm các nội dung chính của chủ đề trong bài viết Hướng dẫn tạo mục lục trong bài viết Blogspot

Cách tạo mục lục trong bài viết Blogger hay Blogspot
Mục lục là một danh sách bao gồm các nội dung chính của chủ đề trong bài viết. Chúng ta có thể sử dụng mục lục để tóm tắt nội dung của bài viết dưới dạng liên kết giúp người đọc dễ dàng nắm bắt được nội dung của bài viết và lựa chọn chủ đề mà họ quan tâm nhất. Để tạo mục lục trong Bài viết Blogger mời các bạn tham khảo hướng dẫn dưới đây:

Cách tạo mục lục trong bài viết Blogspot

1. Đăng nhập vào [Blogger].
2. Ở menu bên trái chọn Chủ đề ⇒ Chọn Chỉnh sửa HTML
3. Thêm mã CSS dưới đây vào trước thẻ </head>
[<style type="text/css">
/* CSS Table of Contents */
#light-mucluc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#mucluc_list{font-weight:700;cursor:pointer;margin:10px 0}
#mucluc_list:focus,#mucluc li:focus,.back_muclucontent:focus{outline:none}
#mucluc_list svg{vertical-align:middle}
#mucluc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#mucluc ol li:before{left:-2em}
#mucluc li a{color:#222}
#mucluc li a:hover{color:#1e90ff}
#mucluc{display:grid}
.back_muclucontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_muclucontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>]
4. Tiếp theo thêm mã bên dưới vào trước thẻ </body>
[<script type="text/javascript">     
//<![CDATA[     
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>     
</script>]

5. Chọn Lưu chủ đề. 6. Bây giờ trở lại phần Bài viết, tạo một bài đăng mới trong Blogger. Ví dụ:

Nội dung 1

[cnttls.blogspot.com] là Blog về chia sẻ kiến thức và thủ thủ thuật về lĩnh vực internet, tổng hợp các thủ thuật blogger, tin học văn phòng và đồ họa thiết kế...

Nội dung 2

[cnttls.blogspot.com]  là Blog về chia sẻ kiến thức và thủ thủ thuật về lĩnh vực internet, tổng hợp các thủ thuật blogger, tin học văn phòng và đồ họa thiết kế...

Nội dung 3

[cnttls.blogspot.com]  là Blog về chia sẻ kiến thức và thủ thủ thuật về lĩnh vực internet, tổng hợp các thủ thuật blogger, tin học văn phòng và đồ họa thiết kế... Chọn tiêu đề con cho phần nội dung 1, nội dung 2, nội dung 3
tạo mục lục trong bài viết Blogspot
7. Tiếp theo chuyển sang chế độ soạn thảo HTML (ở trên cùng bên trái phần bài viết) copy mã bên dưới vào vị trí bạn muốn hiển trị mục lục trong bài viết.
[<div id="light-mucluc">
<div id="mucluc_list" onclick="if (document.getElementById('mucluc').style.display === 'none') { document.getElementById('mucluc').style.display = 'block'; } else { document.getElementById('mucluc').style.display = 'none'; }" role="button" tabindex="0">
Mục lục <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div>
<div id="mucluc">
<ol>
<li><a href="#1" title="Ghi chú nội dung">Nội dung 1</a></li>
<li><a href="#2" title="Ghi chú nội dung">Nội dung 2</a></li>
<li><a href="#3" title="Ghi chú nội dung">Nội dung 3</a></li>
</ol>
</div>
</div>]
8. Thêm id theo thứ tự cho thẻ nội dung xem ví dụ

  • [message]
    • <h3 id="1"> Nội dung 1</h3>
      • cnttls.blogspot.com là Blog về chia sẻ kiến thức và thủ thủ thuật về lĩnh vực internet, tổng hợp các thủ thuật blogger, tin học văn phòng và đồ họa thiết kế...
  • [message]
    • <h3 id="2"> Nội dung 2</h3>
      • cnttls.blogspot.com là Blog về chia sẻ kiến thức và thủ thủ thuật về lĩnh vực internet, tổng hợp các thủ thuật blogger, tin học văn phòng và đồ họa thiết kế...
  • [message]
    • <h3 id="3"> Nội dung 3</h3>
      • cnttls.blogspot.com là Blog về chia sẻ kiến thức và thủ thủ thuật về lĩnh vực internet, tổng hợp các thủ thuật blogger, tin học văn phòng và đồ họa thiết kế...
9. Tiếp theo thêm mã này vào cuối mỗi đoạn cho từng nội dung
[<div class="back_muclucontent" onclick="document.getElementById('mucluc_list').scrollIntoView(true);" role="button" tabindex="0"> Trở lại mục lục bài viết</div>]
  • [message]
    • Ví dụ cho nội dung 1
      • <h3 id="1"> Nội dung 1</h3> cnttls.blogspot.com là Blog về chia sẻ kiến thức và thủ thủ thuật về lĩnh vực internet, tổng hợp các thủ thuật blogger, tin học văn phòng và đồ họa thiết kế...
        <div class="back_muclucontent" onclick="document.getElementById('mucluc_list').scrollIntoView(true);" role="button" tabindex="0">Trở lại mục lục bài viết</div>
Vậy là đã hoàn tất, Bây giờ hãy Xuất bản bài đăng và xem kết quả trên blog của bạn

BÌNH LUẬN

BLOGGER: 1
  1. mục lục blog23:44 4 tháng 5, 2020

    cho mình hỏi bạn có thể tạo thêm mục lục chia nhỏ trong blog spot ko , ví dụ mục lục 1 mục lục 2 bạn có thể add thêm mục lục 1.1 , 1.2 để tiện cho quá trình post bài ko ạ

    Trả lờiXóa

Tên

After Effects,1,Blogger,33,blogspot,9,CNTT,30,Code Blog,1,Facebook,3,Google,2,Google Drive,1,Kỹ năng Bootstrap,1,Kỹ năng Dreamweaver,1,Kỹ năng Excel,7,Kỹ năng Google Driver,1,Kỹ năng IELTS,6,Kỹ năng Illustrator,1,Kỹ năng lập trình,1,Kỹ năng lập trình hướng đối tượng Typescript,1,Kỹ năng Lumion 3D,1,Kỹ năng nói tiếng Anh,1,Kỹ năng Powerpoint,1,Kỹ năng thiết kế,1,Kỹ năng TOEIC,1,Kỹ năng Unity3D,1,Kỹ năng Word,1,Kỹ năng xin việc - viết CV,1,Microsoft 365,1,Microsoft Excel,4,Microsoft Powerpoint,1,Microsoft Word,2,SEO,1,Seo Blogger,6,SEO Blogspot,1,tao-blogspot-chuyen-nghiep,1,Template Blogger,6,Template Blogspot,1,Template MagOne,1,Template Wordpress,1,Thủ thuật Blogger,27,Thủ thuật Blogspot,1,Thủ thuật máy tính,1,Thủ thuật Wordpress,1,Tin học văn phòng,9,VIDEO KHÓA HỌC,6,Webmaster,2,Windows,2,Wordpress,2,Youtube,1,
ltr
item
Chia sẻ kiến thức - Thủ thuật máy tính: Cách tạo mục lục trong Blogspot
Cách tạo mục lục trong Blogspot
CNTTLS | Mục lục là một danh sách bao gồm các nội dung chính của chủ đề trong bài viết Hướng dẫn tạo mục lục trong bài viết Blogspot
https://1.bp.blogspot.com/-6SPvVHyY-n0/W5ksFLSegBI/AAAAAAAAChk/oc-Ld1bUpE81NL6KkjPnWtKduTR-X49XwCLcBGAs/s1600/cach-tao-muc-luc-trong-bai-viet-blogger-hay-blogspot.gif
https://1.bp.blogspot.com/-6SPvVHyY-n0/W5ksFLSegBI/AAAAAAAAChk/oc-Ld1bUpE81NL6KkjPnWtKduTR-X49XwCLcBGAs/s72-c/cach-tao-muc-luc-trong-bai-viet-blogger-hay-blogspot.gif
Chia sẻ kiến thức - Thủ thuật máy tính
https://blog.vinhls.com/2018/10/cach-tao-muc-luc-trong-blogspot.html
https://blog.vinhls.com/
https://blog.vinhls.com/
https://blog.vinhls.com/2018/10/cach-tao-muc-luc-trong-blogspot.html
true
987137131202951109
UTF-8
Đã tải tất cả bài viết Không tìm thấy bài viết nào Xem tất cả Đọc thêm Trả lời Không trả lời Xóa Bởi Home PAGES POSTS Xem tất cả ĐỀ XUẤT CHO BẠN LABEL ARCHIVE SEARCH TẤT CẢ NHỮNG BÀI VIẾT Không tìm thấy bất kỳ bài viết phù hợp với yêu cầu của bạn Trở lại trang chủ Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec vừa xong 1 phút trước $$1$$ minutes ago 1 giờ trước $$1$$ hours ago Hôm qua $$1$$ days ago $$1$$ weeks ago nhiều hơn 5 tuần trước Người theo dõi Theo dõi THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Sao chép tất cả mã Chọn tất cả mã Tất cả các mã đã được sao chép vào clipboard của bạn Không thể sao chép mã / văn bản, vui lòng nhấn [CTRL] + [C] (hoặc CMD + C với Mac) để sao chép Mục lục