[THỦ THUẬT BLOG] Tạo mục lục tự động cho bài viết trên blogger

Xin chào, chào mừng bạn đến với Blog của Mèo, trong bài viết này Mèo sẽ hướng dẫn bạn cách tạo mục lục tự động trong Blogger. Thêm một danh mục tự động trong WordPress rất dễ dàng bằng cách sử dụng một số plugin. Nhưng rất khó để thêm một bảng mục lục trong Blogger vì Blogger không hỗ trợ Plugin.

Trước khi mình hướng dẫn các bạn cách để thêm một mục lục trong Blogger. Mời các bạn cùng đọc qua một số lợi ích của việc có một danh mục bài viết (TOC) trong các bài đăng trên blog Blogger.

Lợi ích cho SEO khi có danh mục (TOC) trong bài viết

Google luôn yêu thích các bài viết, trang blog chi tiết và có cấu trúc tốt. Và bằng cách thêm một danh mục tự động trong các bài viết trên Blogger, sẽ giúp bài viết có cấu trúc tốt và thân thiện với người dùng hơn.

Vậy nên, việc thêm danh mục tự động vào bài đăng trên blog của mình, nó sẽ có cấu trúc và thân thiện với người đọc. Google có thể hiển thị chuyển đến các liên kết trong "Kết quả Tìm kiếm", điều này rất có lợi cho quản trị viên web và nó có thể làm tăng CTR của bạn.

Cải thiện trải nghiệm người dùng

Theo nghiên cứu của NN Group, hơn 79% tổng số người đọc web là những người chỉ đọc lướt qua những điểm quan trọng của một trang web trước khi có hứng thú đọc chi tiết các bài viết.

Trải nghiệm người dùng là một điều rất quan trọng để có được thứ hạng cao hơn trong SERP (Trang kết quả tìm kiếm). Trải nghiệm người dùng giúp của blog có thể được xếp hạng nhanh hơn. Và việc tạo mục lục tự động sẽ giúp bạn cải thiện trải nghiệm người dùng trên blog của mình.

Thêm TOC trong Blogger sẽ cho phép người đọc chuyển đến các phần quan trọng của bài đăng trên blog. Người đọc sẽ dễ dàng hiểu được nội dung của bạn.

Tạo danh mục tự động cho bài viết trong Blogger

Bước 1. Đầu tiên hãy đăng nhập vào Blog Blogger mà bạn muốn thêm mục lục (TOC). Nhấp vào "Chủ đề" và sau đó nhấp vào "chỉnh sửa HTML".

Bước 2. Tìm thẻ </head> trong tệp HTML và dán đoạn mã dưới đây vào ngay trên thẻ </head> như được hiển thị trên ảnh chụp màn hình.

Sao chép và dán tập lệnh này ngay trước thẻ </head> trên mẫu Blogger của bạn.

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>              
//<![CDATA[                      
function mbtTOC(){
	var mbtTOC=i=headlength=gethead=0;           
	headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;
	for (i = 0; i < headlength; i++){
		gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);
        mbtTOC = "<li><
        a href='#point"+i+"'>"+gethead+"</a></li>";
        document.getElementById("mbtTOC").innerHTML += mbtTOC;
    }
}
function mbtToggle(){
	var mbt = document.getElementById('mbtTOC');
    if (mbt .style.display === 'none') {mbt .style.display = 'block';} 
    else {mbt .style.display = 'none';}}           
//]]>              
</script>

Bước 3. Tìm mã ]]> < / b: skin> trong mẫu Blogger của bạn và dán mã được cung cấp bên dưới ngay phía trên thẻ này.

.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;
}

Bước 4. Đây là một bước đơn giản. Tìm mã <data: post.body /> trong chủ đề của bạn và thay thế bằng mã mới được cung cấp bên dưới. Nếu chủ đề của bạn có mã này nhiều lần thì bạn phải thay thế tất cả chúng bằng mã mới này. Sau đó, nhấn "Lưu" và thoát khỏi mục "chỉnh sửa HTML"

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

Bước 5. Tạo mới bài viết hoặc vào bài viết bất kỳ. Chọn "chế độ xem HTML" và dán đoạn mã dưới đây vào nơi bạn muốn hiển thị danh mục tự động cho bài viết trên Blogger.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">MỤC LỤC BÀI VIẾT</button> 
    <ul id="mbtTOC"></ul> 
</div>

và thêm mã này vào bên dưới cùng của văn bản.

<script>mbtTOC();</script>

Cuối cùng nhấn "Xuất bản" bài viết để xem thành quả!

Note: Nếu muốn có mục lục tự động đẹp như của mình thì .... hì hì, bạn tự soi code web đi nha! Chứ chỉ hết thì đời hết vui!