Responsive sitemap cho Blogger

Sitemap là một phần quan trọng của blog, nó giúp các độc giả nắm bắt được các bài viết của bạn một cách dễ dàng. Hôm nay, mình sẽ giới thiệu với các bạn một mẫu sitemap hiện thị theo ba cột khi bình thường và nó còn được kết hợp thêm tính năng responsive.

VIEW DEMO

#Cách thực hiện

1. Đăng nhập Blogger
2. > Trang > Trang mới
3. > Nhập tiêu đề trang
4. > Chuyển sang chế độ viết HTML
5. > Dán code dưới vào

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
<script src="http://www.khanh98.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>

6. > Thay http://www.khanh98.blogspot.com thành URL đến trang blog của bạn.
Lưu ý:

• Nên bỏ tính năng bình luận trên trang
• Nếu có khả năng thì hãy up script lên host của bạn mà dùng lâu dài 

7. > Save

blogtipsntricks