Tạo Responsive Sitemap Với Tùy Chọn Theo Nhãn Style 2

Sitemap ở đây khác với sitemap mà các bạn hay up lên Google Webmaster Tool (Những bạn newbie ko biết thì google search nha).Sitemap ở đây là sơ đồ tổng quan để người xem biết những bài đăng nào ở mục nào, xuất bản ngày mấy,...Nói sao ta, ừm. Các bạn có thể hiểu nó như là cái mục lục vậy, ok? Hôm trước mình so share một mẫu khá đẹp các bạn có thể xem link bên dưới. Và đặc biết nay mình sẽ hướng dẫn thêm các bạn tạo trang sitemap đa màn hình với tùy chọn theo nhãn style 2 tông màu xanh - đen. Và tất nhiên bạn có thể thay đổi màu.


Tạo Responsive Sitemap Với Tùy Chọn Theo Nhãn Style 1

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

Mục Đích

• Tăng trải nghiệm người dùng
• Giúp người dùng biết tổng quan các bài viết
• ...

Thực Hiện

1. Các bạn vào Blogger -> Trang -> trang mới, sau đó đặt tên là sitemap (để cho nó tự tạo link là www.yourblog.tênmiền/p/sitemap.html)
2. Sau đó vào chế độ html chép toàn bô code sau vào trang đó 

HTML<style scoped="" type="text/css">
#head-tab{background:#87D37C;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;}
#anhim-sitemap{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #87D37C}
#anhim-sitemap ul,#anhim-sitemap ol,#anhim-sitemap li{margin:0;padding:0;list-style:none}
#anhim-sitemap .sitemap-tabs{width:30%;float:left}
#anhim-sitemap .sitemap-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-decoration:none;padding:8px 12px;cursor:pointer}
#anhim-sitemap .sitemap-tabs li a:hover{background-color:#333;color:#fff}
#anhim-sitemap .sitemap-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#anhim-sitemap .sitemap-content,#anhim-sitemap .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#anhim-sitemap .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#anhim-sitemap .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#anhim-sitemap .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;overflow:hidden}
#anhim-sitemap .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#anhim-sitemap .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:1px solid #2c3e50;overflow:hidden}
#anhim-sitemap .panel li:nth-child(even){background-color:#fafafa}
#anhim-sitemap .panel li a:hover,#anhim-sitemap .panel li a:focus,#anhim-sitemap .panel li a:hover time,#anhim-sitemap .panel li.bold a{background-color:#fafafa;color:#e06666;outline:0}
#anhim-sitemap .panel li.bold a:hover,#anhim-sitemap .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
@media(max-width:700px){
#anhim-sitemap{border:1px solid #ccc}
#anhim-sitemap .sitemap-tabs,#anhim-sitemap .sitemap-content{overflow:hidden;width:auto;float:none;display:block}
#anhim-sitemap .sitemap-tabs li{display:inline;float:left}
#anhim-sitemap .sitemap-tabs li a,#anhim-sitemap .sitemap-tabs li a.active-tab{background-color:#777}
#anhim-sitemap .sitemap-tabs li a.active-tab{background-color:#87D37C;color:#fafafa}
#anhim-sitemap .sitemap-content{border:0}#anhim-sitemap .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#anhim-sitemap .divider-layer,#anhim-sitemap .panel li time{display:none}}
</style>
<div id="head-tab">
Sơ Đồ Tổng Quan Bài Viết</div>
<div id="anhim-sitemap">
</div>
<script>
var anhimSITEMAP = {
    blogUrl: "http://www.vnitworld.tk", // Blog URL
    containerId: "anhim-sitemap", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " <em style='color:#F2784B;'>New</em>" // HTML for the "New!" text
};
</script>
<script async="async" src="https://googledrive.com/host/0B2azLwPqznxqTkhRSjkzNm5GYTA"></script>

3. Xuất bản

4. Xem thành quả

5.Demo

Demo
click to view

Nâng Cao

Thay đổi màu sắc của cái header (ko phải cái viền bên trái)

tìm dòng #head-tab{background:#87D37C;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;} hình như là dòng đầu tiên thứ hai gì đó. Trong đó có mã màu là #87d37c sau đó thay đổi mã màu bạn muốn.

Vào đây tìm mã màu

Thay đổi cái viền 

 tìm dòng sau, nó là dòng nằm ngay sau dòng trên kia. #anhim-sitemap{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #87d37c} trong đó có cái mả màu là #87d37c. Rồi sau đó đổi màu bạn muốn. Tìm mả màu vào link bên trên đã chia sẽ

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Responsive Sitemap Với Tùy Chọn Theo Nhãn Style 2 , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành côngs

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.