Để Tạo mục lục trong bài viết blogspot chúng ta làm trình tự như sau :
Mục Lục
1. CSS Tạo Khung
#toc_container{background: #f9f9f9;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: black;font-weight: 400;}#toc_container a:hover {color: #E9573F;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 18px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}
Bạn copy đoạn CSS dưới đây và chèn vào trước thẻ ]]></b:skin> hoặc </style>
Bạn tùy chỉnh cho phù hợp với độ rộng của trang web/blog của bạn
2. Javascript cho mục lục
Bạn copy đoạn Javascript dưới đây và chèn vào sau thẻ <head> hoặc trước thẻ </body>3. Bắt đầu code tạo mục lục trong bài viết
<div id="toc_container"> <div class="panel show"> <ul class="toc_list"> <li><a href="#1"> 1. css tạo khung</a></li> <li><a href="#2"> 2. javascript</a></li> <li><a href="#3"> 3. Tạo mục lục trong bài viết blogspot</a></li> </ul> </div> </div> <!-- Các bạn viết nội dung ở đây nhé --> <h3 id='1'> 1. Css tạo khung </h3> //nội dung phần 1 các bạn nhập vào đây <h3 id='2'> 2. javascript </h3> //nội dung phần 2 các bạn nhập vào đây <h3 id='3'> 3. Tạo mục lục </h3> //nội dung phần 3 các bạn nhập vào đây
OK vậy là hoàn thiện cách Tạo mục lục trong bài viết blogspot các bạn xuất bản bài viết và trải nghiệm nhé ! web hay Chúc các bạn thành công
Lưu ý code ở chế độ html kẻo chế độ href="#1,#2,#3" sẽ mất định dạng nhé. sai là không hiển thị được mục lục trong bài viết nha mọi người !
Trả lờiXóax-)
Trả lờiXóaĐăng nhận xét
vungve.com không chấp nhận bình luận thiếu văn hóa