Từng bước tạo TOC(Mục lục bài viết) cho blogspot 2021

By Dda -

Bạn muốn web/blog của bạn trở nên chuyên nghiệp hơn, bạn có một bài viết dài và muốn cho khách hàng truy cập không phải cất công cuộn trang. Điều đó dẫn chúng ta đến suy nghĩ là nên có một "Mục lục bài viêt" ngay trong chính nội dung của mình. Như hình dưới



Khách truy cập không cần phải bận tâm để cuộn xuống hoặc lên để tìm kiếm phụ đề. Với TOC (bảng nội dung), khách truy cập có thể trực tiếp nhảy liên kết nội bộ mà không cần phải nán lại để đọc nội dung của các bài viết trên blog, ngoài ra

  • Giúp khách truy cập dễ dàng tìm thấy bài viết
  • Rút ngắn thời gian để truy cập nội dung blog
  • Cải thiện Seo
  • Bài viết có cấu trúc hơn

Từng bước tạo mục lục bài viết

Thêm Javascript

Truy cập Blogger, đi đến Chủ đề -> chọn Chỉnh sửa HTML -> dán mã code dưới vào trước thẻ </head>
<script type='text/javascript'> //<![CDATA[  function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}} //]]> </script>

CSS cho mục lục

Tương tự, dán tất cả các mã trên ngay trước hoặc trên thẻ ]]</b:skin>. Bạn cũng có thể cài đặt giữa <style> và </style>
.mbtTOC{ border:5px solid #f7f0b8; box-shadow:1px 1px 0 #EDE396; background-color:#FFFFE0; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; display: inline block; width: auto; } .mbtTOC ol,.mbtTOC ul { margin:0; padding:0; } .mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; } .mbtTOC a{ color:#0080ff; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px; } .mbtTOC button:after{ content: "f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px; }

Sử dụng

Tìm tất cả các thẻ <data:post.body/> thay thế nó bằng
<div id="post-toc"><data:post.body/></div>

Lưu ý: 

  • Sẽ có nhiều hơn 1 thẻ  <data:post.body/> nên hãy kiểm tra đến khi TOC hoạt động nhé
  • Dừng lại ở tiêu đề H2


Popular posts from this blog

Thu gọn bài viết, mô tả chi tiết sản phẩm trên web/blog bằng javascrpit

By Dda -
Image
Bạn có nội dung chi tiết quá dài, bạn có một bài viết với số dòng nhiều, bạn muốn hạn chế lại để khi người dung muốn xem thêm thì click xem thêm còn không thì để gọn lại. Làm cho web nhìn gọn gàng, trực quan cho khách truy cập. Thu gọn vài viết, mô tả sản phẩm Bài này sẽ giúp các bạn thu gọn bài viết, mô tả sản phẩm trên web/blog bằng javascrpit Code thu gọn <style> .single_post .post_body {     overflow: hidden;     position: relative;     padding-bottom: 25px; } .single_readmore {     text-align: center;     cursor: pointer;     position: absolute;     z-index: 10;     bottom: 0;     width: 100%;     background: #fff; } .single_readmore:before {     height: 55px;     margin-top: -45px;     content: "";     background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);     background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);     background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,25
Đọc tiếp

Vui Trung Thu nhận quà vi vu cùng Z.com Việt Nam

By Dda -
Image
Ngày mai là Tết Trung Thu Mời bạn tham dự “vi vu nhận quà” Trung thu tự thuở nào trong lòng mỗi người vẫn luôn mang một ý nghĩa tốt đẹp, là mùa đoàn viên, mùa trăng tròn với ước mơ hạnh phúc trọn vẹn. Là dịp để chúng ta trao gửi yêu thương qua những hộp quà, chiếc bánh trung thu đậm đà đầy hương vị. Z.com Việt Nam trân trọng gửi tới quý khách hàng chương trình ƯU ĐÃI ĐẶC BIỆT: Đồng giá các tên miền chỉ từ 19K .site, .space, .xyz: 19K .tech, .asia: 29k Miễn phí dịch vụ 100% khi đăng ký tên miền .VN Tên miền .COM chỉ 199K Miễn phí sử dụng 1 năm phần mềm kế toán Kaike Đăng ký tại: https://forms.gle/RkaEuPCMSUe1UxZ59 Giảm ngay 50% khi đăng ký Hosting, Cloud Server gói bất kỳ . Nhập mã: TTZCOM2021 (*) Lưu ý: Mã khuyến mãi chỉ áp dụng 1 lần/ tài khoản. - Thời gian áp dụng: Từ 16/09/2021 đến hết ngày 21/09/2021 - Số lượng có hạn - Mua ngay: Tại đây Z.com Việt Nam kính chúc quý khách một mùa Trung Thu mạnh khoẻ, hạnh phúc bên gia đình và người thân. Đăng ký ngay
Đọc tiếp

Vietnix Free DirectAdmin, Giảm 30% trọn đời dịch vụ VPS

By -
Image
Kể từ tháng 09/2021 Vietnix cập nhật chính sách kinh doanh mới: Khi mua VPS tại Vietnix quý khách hàng sẽ được Free DirectAdmin chính hãng (bản Personal) trong quá trình sử dụng. Vietnix cam kết không sử dụng license crack/nulled. Quý khách có thể kiểm tra tính hợp lệ của license trên trang chủ của DirectAdmin. Với việc được Free DirectAdmin chính hãng, quý khách hàng có thể tiết kiệm được khoảng 600,000đ/năm và sẽ quản trị dễ dàng, khai thác tối đa hiệu năng của VPS. Cũng trong tháng 9 này, nhằm hỗ trợ các cá nhân, doanh nghiệp trong tình hình dịch bệnh diễn biến phức tạp như hiện nay, Vietnix gửi tới các quý khách hàng chương trình ưu đãi hấp dẫn  “giảm giá 30% trọn đời”  khi đăng ký dịch vụ VPS. Chi tiết chương trình như sau: Thời gian áp dụng:  Từ ngày 01/09/2021 đến ngày 31/10/2021 (Áp dụng cho các dịch vụ VPS đăng ký mới). Sản phẩm áp dụng ưu đãi: VPS Giá Rẻ: Thuê Cloud VPS giá rẻ chỉ từ 89k/tháng – Tặng DirectAdmin bản quyền => Đăng ký ngay dịch vụ thuê  VPS Giá Rẻ  VPS Phổ T
Đọc tiếp