Tạo sitemap hay mục lục (Table Of Contents) cho Blogpost

Một dạng sitemap hay bảng mục lục (Table Of Content(TOC)) được Abu-Farhan phát triển rất, mình thấy rất phù hợp cho các blogger nên hôm nay mình xin chia sẽ cùng các bạn cách tạo Table Of Content này. Bạn có thể xem ảnh minh họa bên dưới

Hình ảnh minh họa

» Bắt đầu thủ thuật


1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

.gfg-root {
width : 528px; /* độ rộng của TOC*/
height : auto;
magin-left:5px;
overflow : hidden;
text-align : center;
font-family: arial;
border: 1px dotted #fff; /* đường viền TOC*/
font-size: 12px; /* cở chữ của TOC*/
}
.gfg-subtitle {
font-size: 12px; /* cở chữ của phần tên nhãn*/
font-weight : bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcRyrJ81mCJ3mrRyp2anfxstAfTAYBOHF5v7jkkqUGw4TmBjzlj61JGA4iVs00fvpEy78Z1joT4LbAwz4m8RPxi_tS59NuSYTuQsw5mUlLlQ6l-Rb2Zsry08NQhe4g7eODkcgyEkOkSW-x/);
overflow : hidden;
margin-bottom : 0px;
text-align:left;
}
.gfg-subtitle a {
color : #ff0000; /* màu chữ của tên nhãn*/
padding:3px 0px 3px 15px;}
.gfg-subtitle a:hover {
color : #fff; /* màu chữ của tên nhãn khi rê chuột*/
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-list a{
color:#666; /* màu chữ của tiêu đề bài viết*/
}
.gfg-list a:hover{
color:#000; /* màu chữ của tiêu đề bài viết khi rê chuột*/
}

5. Save template lại
6. Bạn vào soạn thảo bài viết mới (New Post) ở chế độ HTML và chèn vào code bên dưới

<script style="text/javascript" src="http://data-traidatmui.appspot.com/scripts/sitemap.js"></script> <script src="http://www.traidatmui.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

- Bạn thay http://www.traidatmui.com thành địa chỉ blog của bạn.

7. Bây giờ bạn xuất bản bài viết (Publish posts) là xong

Ở trên mình hướng dẫn bạn chèn vào trong phần soạn thảo bài viết, tuy nhiên bạn vẫn có thể chèn vào ngay HTML/Javascript và cho nó hiển thị ở một vị trí thích hợp.

Chúc bạn thành công

Nguồn : traidatmui.com

Copy : Hoithanhcaygiang.vn

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!