Hướng Dẫn Tạo MỤC LỤC Cho Bài Viết Website Blogspot Trở Nên ...

Có thể bạn quan tâm

Trang Chủ
Giới Thiệu
SiteMap
Quảng Cáo
Liên Hệ - Admin: 0918.87.1984

Header Ads

Home

Home / CHIA SẺ / HOT / Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp 12/10/2017 08:24:00 CH CHIA SẺ, HOT Bài viết này sẽ hướng dẫn các bạn cách lập MỤC LỤC tại một bài viết trong website (Blogspot), nhằm tạo cho nội dung bài viết được rõ ràng cho người đọc và website trở nên chuyên nghiệp hơn... Ví dụ MỤC LỤC trong bài viết: MỤC LỤC: Nội dung bài viết [Ẩn/Hiện]

Bước 1: Chèn CSS
Bước 2: Chèn code Javascript
Bước 3: Tạo chỉ mục
Bước 4: Lập ID trong nội dung
Bước 5: Lời kết

Bước 1:

Đầu tiên là đoạn code CSS (làm đẹp đoạn mục lục): Mở code html của website Blogspot: Tìm nơi chèn, các bạn ấn Ctrl + F tìm ]]></b:skin> Copy chèn đoạn code CSS bên dưới vào trước]]></b:skin> /*===================================== = CSS TẠO MỤC LỤC =====================================*/ #toc_container{background: #edf6ff;border: 1px solid #aaa;padding: 0 10px;margin-bottom: 1em;font-size:95%;}p.toc_title,ul.toc_list {margin: 5px;padding-left: 0;}.toc_list li {list-style: none;margin-top: 0px; margin: 0!important;}#toc_container a {text-decoration: none;text-shadow: none;color: #52b043;font-weight: 555;}#toc_container a:hover {color: #d7c20d;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 20px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}

Bước 2:

Copy đoạn code Javascript bên dưới và chèn vào sau thẻ <head> hoặc trước thẻ </body> (Ấn Ctrl + F để tìm nhanh đến code <head> hoặc </body>) hoặc trước thẻ  <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } </script>

Bước 3:

Khi tạo bài viết các bạn sử dụng ID để cho phép lập chỉ mục tìm đến nội dung theo mục lục ví dụ bên dưới: <div id="toc_container"> <b>MỤC LỤC: Nội dung bài viết</b>  <span class="accordion active">[Ẩn/Hiện]</span> <br /> <div class="panel show"> <ul class="toc_list"> <li><a href="#phan-1">Phần 1: abc</a></li> <li><a href="#phan-2">Phần 2: abc</a></li> <li><a href="#phan-3">Phần 3: abc</a></li> <li><a href="#phan-4">Phần 4: abc</a></li> <li><a href="#phan-5">Phần 5: abc</a></li> </ul> </div> </div>

Bước 4:

Ở nội dung muốn chỉ mục đến được các bạn phải dùng thẻ H3 (Tiêu đề con) và thêm ID tương ứng như ví dụ code bên dưới: <h3 id="phan-1"> 1. Nội dung Abc</h3> Nội dung bài viết của phần 1 ở đây <h3 id="phan-2"> 2. Nội dungAbc</h3> Nội dung bài viết của phần 2 ở đây <h3 id="phan-3"> 3. Nội dungAbc</h3> Nội dung bài viết của phần 3 ở đây <h3 id="phan-4"> 4. Nội dungAbc</h3> Nội dung bài viết của phần 4 ở đây <h3 id="phan-5"> 5. Nội dungAbc</h3> Nội dung bài viết của phần 5 ở đây

Lời kết:

Việc lập mục lục cho website blogspot yêu cầu các bạn có một chút kiến thức HTML là có thể sử dụng đơn giản. Trong quá trình thực hiện hướng dẫn này nếu các bạn gặp vướng mắc vui lòng liên hệ mình sẽ hướng dẫn chi tiết hơn... Cảm ơn và chúc các bạn thành công! Thế Linh

CHIA SẺ Share it Tweet Share it Share it Pin it

Bài liên quan

HOT

Facebook

Danh mục

ẢNH ANH LINH BẤT ĐỘNG SẢN CÂU CHUYỆN CHIA SẺ DỰ ÁN BĐS ĐẦU TƯ HOT MUA BÁN BĐS SALES REAL SỰ KIỆN TIN TỨC VIDEOS

Bài xem nhiều

Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp
Các phân khu căn hộ chung cư Ecopark
Gia đình là số 1
1/7/2025: Việt Nam kỷ nguyên vươn mình sát nhật 63 tỉnh thành -> 34 tỉnh thành
Chung cư 6th Element

Random Posts

LINK

Comments

QUẢNG CÁO

FOLLOWERS

Được tạo bởi Blogger.

Random Posts

Website đang chạy thử nghiệm M: 0918871984 E: [email protected] W: www.NguyenTheLinh.com Powered By Blogger

Danh mục

BẤT ĐỘNG SẢN (30) TIN TỨC (28) DỰ ÁN BĐS (24) HOT (14) CHIA SẺ (11) CÂU CHUYỆN (9) MUA BÁN BĐS (9) VIDEOS (9) SALES REAL (6) ĐẦU TƯ (4) SỰ KIỆN (3) ẢNH (3) ANH LINH (1)

Hướng Dẫn Tạo MỤC LỤC Cho Bài Viết Website Blogspot Trở Nên ...

Header Ads

Bước 1:

Bước 2:

Bước 3:

Bước 4:

Lời kết:

Bài liên quan

Post a Comment

10 nhận xét:

Follow Us

Facebook

Danh mục

Bài xem nhiều

Random Posts

LINK

Comments

QUẢNG CÁO

FOLLOWERS

Random Posts

Danh mục

Popular Posts

Tạo Auto-generated Mục Lục Với HTML Slots - Viblo

Cách Tạo Mục Lục Cuộn Theo Trang Bài Viết Blogspot - NTLRUBY

Thủ Thuật Tạo Mục Lục Bằng Tay Không Cần Dùng Plugin | Chống Trộm

Thủ Thuật Tạo Mục Lục Trong Html, Dùng Jquery Tạo Mục Lục Cho ...

Hướng Dẫn Tao Mục Lục Cho Nội Dung Website, Mô Tả Sản Phẩm ..

Làm Mục Lục Tự động Trong Html - Jquery - YouTube

Cách Làm Mục Lục Tự động (table Of Content) Cho Bài Viết Ghost

2 Cách Tạo Mục Lục Cho Bài Viết Trong WordPress Không Cần Plugin

Tạo Mục Lục Thủ Công Cho Bài Viết Không Cần Plugin - Cần Xem

Cách Tạo Mục Lục Cho Bài Viết Trên Website

Cách Tạo Mục Lục ToC Sử Dụng Mã HTML Và CSS Thuần Túy

Cách Tạo Mục Lục ẩn / Hiện Cho Bài Viết Blogspot Và Blogger

[WPtips] Liên Kết ẩn Và Cách Tạo Mục Lục Thủ Công ... - Sera Hwang

Hướng Dẫn Cách Tạo Mục Lục Tự động Trong Nội Dung Bài Viết ...

Liên Hệ