Header ads

Cách tạo table- content cho blogger

Đối với các web sử dụng nền tảng wordpress, việc tạo một bảng mục lục hay còn gọi là table content là rất đơn giản. Chỉ cần thêm một plugin nhỏ là được thôi. Tuy nhiên đối với các blogger, việc tạo một table content tương đối hơi khó một tý. Ở bài này mình sẽ hướng dẫn các bạn chỉ với 4 bước nhanh chóng sau, các bạn cũng có thể tạo cho mình một table-conent khá đẹp mắt nhưng cũng không kém phần mượt mà



Giải thích thêm một chút về table content: Trong bài viết các bạn sử dụng các thẻ tiêu đề h2, h3, h4...để điều hướng nhanh đến mục cần đọc. Điều này thực sự hữu ích đối với các bạn chuyên viết về blog truyện hay chia sẽ những nội dung thật dài mà cần phân ra các mục nhỏ hơn để độc giả tiện theo dõi,

Các bạn xem qua phần demo ở đây : Bài đăng có sử dụng table-content



Vị trí xuất hiện của bảng mục lục thích hợp nhất chính là ngay tại dấu ngắt nhẩy. Lúc này khi viết bài cho blog các bạn nhớ chèn dấu ngắt nhầy vào nhé. Bảng mục lục sẽ hiện ra tự động luôn

Các bước thực hiện theo 4 bước lần lượt như sau

1. Chèn code html


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 đề:


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ị


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_tin li {         cursor: pointer;     } }


Tham khảo code từ: thietkeblogspot.com

Post a Comment

0 Comments