[THỦ THUẬT BLOG] Cách tạo mục lục tự động 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. Việc code 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 dễ hiểu, rõ ràng và thân thiện với người dùng hơn.

Vậy nên, khi bạn viết thêm danh mục tự động vào bài đăng trên blog của mình, sẽ góp phần cải thiện khả năng SEO (có thể hiển thị mục lục trên kết quả tìm kiếm Google) và thân thiện với người đọc hơn. Google có thể dựa theo thói quen, hành vi của người dùng trên Blog của bạn mà tự thêm các tiêu đề được người dùng quan tâm nhiều nhất ra bên ngoài kết quả tìm kiếm, giúp người dùng chuyển đến các liên kết bên trong bài viết nhanh và hiệu quả hơn, đ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: các bạn có thể xem mẫu mục lục tại bài viết "[THỦ THUẬT BLOG] Tạo mục lục tự động cho bài viết trên blogger"