Cách để tạo mục lục khi xuất bản bài đăng trên blogspot của blogger.com

tháng 5 03, 2024

Cách để tạo mục lục khi xuất bản bài đăng trên blogspot của blogger.com

Bước 1 - Chèn code tạo mục lục trong bài đăng trong trình chỉnh sửa html của blogspot

Bạn đăng nhập vào trình quản lý blogger và vào phần chủ đề.

Sau đó bấm vào chỗ chỉnh sửa html .

– Sau khi mở phần chỉnh sửa html, bạn sẽ thấy một trang toàn mã trên màn hình. Bạn click chuột cho dấu nháy nhấp nháy trong bảng mã sau đó bấm Ctrl+F ( Đối với Window) để gọi ô tìm kiếm. Bạn tìm kiếm đoạn code </head> và dán đoạn code này vào phần trước của thẻ </head> nhé.

Tìm kiếm đoạn code </head> Chèn code vàotrước thẻ </head> để tạo mục lục cho bài viết trên blogspot của bạn

Lưu ý quan trọng: Nếu bạn thực sự không tìm thấy thẻ </head> ở đâu thì bạn chèn code đó vào ngay bên dưới thẻ < meta content ….description > nhé. Vì mặc định thẻ này nằm trong thẻ <head>…</head>.

Chèn mã code xong sẽ được như trong hình.

Bước 2: Thêm đoạn mã css để tạo mục lục cho bài đăng của bạn khi post bài đăng trên blogspot

Bạn cần thêm một đoạn mã CSS để mục lục của bạn hiển thị trên bài viết như sau.

Trong ô tìm kiếm bạn nhập từ khóa ]]></b:skin> và copy đoạn css bên dưới dán vào ngay phía trên ]]></b:skin> nhé.

.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;
        font-family:oswald, arial;
        display: block;
         width: 70%;
        } 
		
.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;
                    }

Dán css xong sẽ được như thế này:

Tìm kiếm khóa ]]></b:skin> và dán đoạn css để hiển thị mục lục trong bài đăng trên blogspot

Bước 3: Tùy chỉnh hiển thị trên html của blogspot

Sau khi bạn đã thêm đoạn css ở bước 2, bạn tiếp tục nhập đoạn mã sau vào ô tìm kiếm <data:post.body/> . Và thay đoạn mã đó bằng dòng code bên dưới.

<div id="post-toc"><data:post.body/></div>

Tìm và thay thế theo hướng dẫn như hình ảnh minh họa:

Lưu ý quan trọng để tạo mục lục thành công: Sau khi thay đoạn mã đầu tiên tìm thấy, bạn tiếp tục bấm tìm kiếm xem có còn đoạn mã <data:post.body/> nào nữa không. Nếu bạn tìm thấy nhiều hơn một đoạn thì hãy thay thế tất cả bằng đoạn code mới nhé. Đây lại là một lý do mà nhiều bạn copy bài gốc không nhắc đến khiến nhiều người tưởng chỉ thay 1 lần là được.

Sau khi thay hết các đoạn mã ở 3 bước trên bạn bấm lưu lại chủ đề , giờ chúng ta sẽ tiến hành tạo mục lục tự động trong bài đăng hoặc trang mới .

Bước 4: Post bài đăng của bạn trên blogspot với mục lục tự động được tạo

Bạn tạo 1 bài viết mới hoặc chỉnh sửa bài viết muốn tạo mục lục.

Việc của bạn lúc này là hãy dán đoạn mã bên dưới vào bài đăng trên blog , tại nơi bạn muốn đặt mục lục.

Theo kinh nghiệm tôi khuyên bạn nên đặt sau đoạn mở đầu của bài viết. Hoặc sau dấu ngắt trang Readmore……

Cách đặt là bạn phải chuyển sang chế nhập html nhé

Đoạn mã này sẽ được dán nơi bạn muốn kucj lục xuất hiện trong bài đăng.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">MUC LUC</button> 
    <ol id="mbtTOC"></ol> 
</div>

Bước 5: Dán đoạn mã javascript để kích hoạt TOC. tạo lục lục cho bài đăng

Bước cuối cùng là bạn cần dán mã Js ( javascript) dưới đây ở cuối cùng băì đăng để kích hoạt TOC.

Giờ bạn bấm xuất bản blog và xem kết quả nhé.

<script>mbtTOC();</script>

Lưu ý quan trọng để chắc chắn tạo mục lục thành công từ web xuân thu là:

Có người làm đúng tất cả các bước trên, nhập đúng code vào vị trí nhưng lúc tạo mục lục thì không được. Nó chỉ hiện mỗi chữ Contens hoặc chữ Mục Lục. Lỗi code bị mất định dạng là lý do không hiện mục lục. Hãy copy và dán đầy đủ mã, kể cả khoảng cách, khoảng trắng.

Như vậy là cpb4blogger.blogspot.com đã hướng dẫn các bạn cách tạo mục lục tự động cho bài viết blogspot rồi nhé. Mục lục này theo tôi nó còn đơn giản nhưng dễ thực hiện cho người mới, không rành về lập trình code web.

Chúc các bạn tạo mục lục thành công. Hãy để lại bình luận hoạc chia sẻ cho bạn bè nếu thấy hữu ích nhé.

Bài viết này đang dùng cách này để tạo mục lục, bạn thấy hữu ích không?

Demo Cách để tạo mục lục khi xuất bản bài đăng trên blogspot từ cpb4blogger

P/s: Dù là tạo mục lục tự động nhưng mỗi lần tạo bài mới bạn phải lặp lại bước 4 và bước 5 nhé. Hãy lưu lại 2 đoạn code của bước 4 và bước 5 vào notepad và dùng khi đăng bài.

Tìm kiếm Blog này

Sổ tay Blogger