Bài 4 - Tạo SiteMap giao diện table đẹp cho blogspot

Sitemap là thành phần nên có trên blog hay bất kỳ website nào để độc giả dễ dàng theo dõi và điều hướng các bài viết làm cho blog của bạn thân thiện hơn với người sử dụng và bài viết này sẻ giúp bạn thêm site map cho blogger với giao diện khá thân thiện cho người dùng. 

Thêm sitemap cho blogspot

Tại "bảng điều khiển" bạn chọn vào "trang" 

Tiếp theo bạn chọn "trang mới" sau đó chọn soạn thảo post ở chế độ HTML sau đó thêm đoạn code sau vào và ấn Xuất bản

<style scoped="scoped" type="text/css"> /* CSS Sitemap */ #bp_toc {background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px;} .toc-header-col1 {padding:10px!important;line-height:15px;background-color:#01c0f4;width:250px;transition:all 0.3s ease-in-out;} .toc-header-col2 {padding:10px!important;line-height:15px;background-color:#6cd9dd;width:75px;transition:all 0.3s ease-in-out;} .toc-header-col3 {padding:10px!important;line-height:15px;background-color:#44cc9a;width:125px;transition:all 0.3s ease-in-out;} .toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {opacity:0.9;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:15px;text-transform: lowercase;text-decoration:none;color:#fff;font-family:'Roboto Slab';font-weight:400;letter-spacing:0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding:10px;font-size:89%;;transition:all 0.3s ease-in-out;} .toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {background:#fff;} .toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) { padding:10px;font-size:89%;} .toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {padding:10px;font-size:89%;} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f6af54;} span.toc-note {padding:10px;margin:10px 0;display:inline-block;background:#fff; color:#666;} #bp_toc table {width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color: transparent;} #bp_toc tr:nth-child(even) {background:#fafafa} #bp_toc tr:nth-child(odd) {background:#eee} </style> <div id="bp_toc"> Loading Sitemap. Please wait....</div> <script src="https://googledrive.com/host/0B395DCTZ7t5KU2JPUjlMdmdmMVk" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> <div style="clear: both;"> </div>

Các bạn có thể xem demo sitemap tại đây