Code Widget sitemap effect responsive cho Blogger

Hôm nay, Vinll chia sẻ với các bạn một tiện ích rất hay. Đó là tiện ích bài viết được chia theo nhãn. Với tiện ích này bạn có thể làm sitemap cho Blogspot của bạn. Hoặc có thể làm widget trên sidebar để thêm sinh động. Đặc biệt, tiện tích này có tính năng Responsive nên có thể đặt ở bất cứ vị trí nào. Cách cài đặt cũng vô cùng đơn giản.

Code Widget sitemap effect responsive

Có 2 cách sử dụng 1 là làm site map, 2 là làm widget trên sidebar. Các bạn chọn 1 trong 2 cách dưới đây nhé.

Cách sử dụng làm sitemap

Bước 1: Đăng nhập vào Blogger -> Trang -> tạo Trang mới

Bước 2: Chuyển sang chế độ HTML và copy đoạn code dưới đây vào trong trang mới tạo. Đặt tên trang là sitemap.

HTML
<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Chờ xíu nha!...</span></div>
<script>
var toc_config = {
    url: 'https://vinll.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 3,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/vinlll/blogger-vinll/master/widget-sitemap-effect.js"></script>
</div>

Bước 3: Lưu lại và xem kết quả. Quá dễ phải không nào.

Cách sử dụng làm widget trên sidebar

Bước 1: Vào Bố cục -> Thêm tiện ích HTML/Javascript ở phần sidebar

Bước 2: Copy đoạn code ở trên vào trong tiện tích vừa tạo rồi lưu lại xem kết quả.

Demo

Ghi chú:

Trong đoạn code bạn tìm https://vinll.blogspot.com/ và thay bằng địa chỉ trang web của bạn.

showNew: 3 đây là số bài viết mới nhất được đánh dấu New.

Lưu ý là các bạn chỉ được chọn 1 trong 2 cách thôi nhé. Làm cùng lần cả 2 cách vừa trên sidebar vừa trên sitemap thì sẽ bị lỗi nhé.

Phiên bản widget sitemap effect responsive màu trắng

Phiên bản ở trên là phiên bản màu đen. Ngoài ra, còn có phiên bản màu trắng. Nếu bạn nào thích màu trắng thì có thay đổi code ở trên thành code dưới này nhé.

HTML
<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Đợi tí nhé!...</span></div>
<script>
var toc_config = {
    url: 'https://vinll.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 3,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/vinlll/blogger-vinll/master/widget-sitemap-effect.js"></script>
</div>