Tạo mục lục với nội dung chính sử dụng các thẻ tiêu đề của bài viết giúp điều hướng nhanh đến mục muốn xem khi click chuột vào danh mục đó. Những Blogspot chuyên viết về thủ thuật, nhật ký,..., có bài viết với nội dung dài nên sử dụng mục lục để giúp điều hướng nhanh đến mục muốn xem khi click chuột vào mục đó.
Tương tự như sách, văn bản, thuyết trình,..., phải có mục lục đầu trang thì trong bài viết cũng vậy nhưng đơn giản hơn vì bài viết bị giới hạn từ nên chỉ cần chia thành những mục chính cũng đủ đáp ứng yêu cầu.
Nội dung chính
1. Chèn code html
2. Chèn script trước thẻ đóng </body>
3. Cách thêm thẻ tiêu đề:
4. Viết css hiển thị
Khi soạn thảo bài viết sau vài đoạn giới thiệu đầu dòng thường sử dụng dấu nhắt nhảy, và thêm mục lục bên dưới vị trí này là thích hợp nhất
Các bước thực hiện:
1. Chèn code html tạo mục lục tự động trong nội dung bài viết blogspot
Thêm đoạn code bên dưới thẻ dữ liệu nội dụng bài viết <data:post.body/><b:if cond='data:view.isPost'>
<div class='box_category'/>
</b:if>
2. Chèn script trước thẻ đóng </body>
<b:if cond='data:view.isPost'><script>//<![CDATA[
var postBody = document.querySelector('.post-body')
var titleChapter = postBody.querySelectorAll('h2,h3,h4,h5,h6')
if (1 <= titleChapter.length) {
var i, leChapteraptor = []
for (i = 0; i < titleChapter.length; i++) {
anchorChapter = 'chapter-' + (i + 1)
titleChapter[i].setAttribute('id', anchorChapter)
titleChapter[i].setAttribute('title', 'Lên đầu trang')
leChapteraptor[i] = '<li data-target=' + "#" + anchorChapter + '>' + titleChapter[i].innerHTML + '</li>'
}
$('.box_category').html('<p>Nội dung chính <label></label></p><ul class="chapter">' + leChapteraptor.join('') + '</ul>')
} else {
$('.box_category').remove()
}
$(function() {
var name_more = $('.post-body a[name=more]')
if (name_more) {
$('.box_category').insertAfter(name_more)
} else {
$('.box_category').remove()
}
})
$('.box_category p>label').click(function() {
$(this).toggleClass('show')
$(this).parent().parent().find('ul').slideToggle('slow')
})
$('.box_category li').bind('click', function() {
var target = $(this).attr('data-target')
$('html, body').stop().animate({
scrollTop: ($(target).offset().top) - 70
}, 'slow')
})
for (k = 0; k < titleChapter.length; k++) {
titleChapter[k].addEventListener('click', function() {
$('html, body').stop().animate({
scrollTop: ($('.box_category').position().top)
}, 'slow')
})
}
//]]></script>
</b:if>
Lưu ý:
Bài viết phải chèn dấu ngắt nhảy sau vài dòng mở đầu, nếu không mục lục sẽ không hiển thị.
Template cần có thư viện link jquery
3. Cách thêm thẻ tiêu đề mục lục tự động trong nội dung bài viết blogspot:
Có 2 cách:+ Thêm trực tiếp bên khung soạn thảo bằng cách để con trỏ nhấp nháy, ngay trước hoặc sau hoặc bôi đen đoạn văn bản sau đó trên thanh công cụ soạn thảo click chọn ô Chuẩn => menu xổ xuống chọn một trong các loại Tiêu đề (h2), Tiêu đề con (h3), Tiêu đề nhỏ (h4)
+ Thêm bên khung soạn thảo HTML bài viết
Khi soạn hay chỉnh sửa bài viết, bên khung soạn thảo HTML của bài viết, thêm các thẻ h2, h3, h4, h5, h6.
<h2>Tiêu đề </h2>
<h3>Tiêu đề con</h3>
<h4>Tiêu đề nhỏ</h4>
...
Các bạn có thể thay bằng các thẻ headings h2, h3, h4, h5 hay h6 tùy các bạn
4. Viết css hiển thị tạo mục lục tự động trong nội dung bài viết blogspot
Phần viết css cho giao diện hiển thị của mục lục, các bạn tự thiết kế theo sở thích của mình, code css tham khảo đang áp dụng với trường hợp blog mình.box_category {
background-color: #f0f1f5;
margin-top: 22px;
padding: 15px;
border-left: 4px solid;
border-color: #4285f4;
}
.box_category p {
font-size: 1.3em;
text-align: center;
}
.box_category p>label:after {
content: '[Ẩn]';
}
.box_category p>label.show:after {
content: '[Hiện]';
}
.box_category ul {
margin: 10px 0 0;
padding: 0;
}
.box_category li {
list-style-type: none;
line-height: 1.8rem;
}
@media (min-width: 769px) {
.box_category p>label, .box_category li {
cursor: pointer;
}
}
Source : www.hoit.asia