Thêm 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"
Thêm sitemap giao diện table đẹp cho blogspot
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
Donate MoMo: 035.45.48.599
Bài đăng mới hơn Bài đăng mới hơn Bài đăng cũ hơn Bài đăng cũ hơn

Bài đăng khác

15 nhận xét

Khi Comment hãy click vào "Thông báo cho tôi" để theo dõi phản hồi mới nhất từ admin
  1. Hi Admin Blog! bài viết rất hay, mình rất muốn đăng lại lên blog mình, mong được sự cho phép của admin |o| @@,

    Trả lờiXóa
  2. Thank Admin, mình sẽ ghi nguồn đàng hoàng :)

    Trả lờiXóa
  3. Hi Akat Suki tự nhiên tìm trên mạng và thấy bài này của ông bạn, chúc một ngày tốt lành nhé

    Trả lờiXóa
  4. bạn ơi làm sao bỏ 2 dòng này: https://www.fshare.vn/file/W3DB6PQC7QSG

    Trả lờiXóa
    Trả lời
    1. Cách nhanh và đơn giản nhất là:
      .toc-note{display:none;}

      Xóa
    2. Đoạn css trên bài viết bạn sử dụng ctr+f để tìm "span.toc-note" sau đó thêm thuộc tính ở trên vào là dc

      Xóa
  5. Bạn ơi dòng dưới thì bỏ được rồi còn dòng trên vẫn còn...https://www.fshare.vn/file/Z38KXQMN2567
    thank bạn nhiều...:):):):):):):):)

    Trả lờiXóa
    Trả lời
    1. Uả cái đó là tiêu đề của bài viết mà, (tiêu đề của trang tĩnh) nếu bạn muốn bỏ thì đừng đặt tiêu đề, hoặc đặt id hoặc class ẩn đi làm xong hà :D

      Xóa
  6. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  7. ẩn class như thế nào vậy bạn?

    Trả lờiXóa
    Trả lời
    1. Cái đó liên quan đến kiến thức về html và css nên bạn tìm hiểu 1 tí là xong ngay thôi, có gì k biết cứ pm mình qua yahoo fb: fb.com/laodongblog.blogspot

      Xóa
  8. code sitemap rất đẹp, thank bạn nhiều lắm! có gì ghé site mình ủng hộ nhé http://vnn-daily.blogspot.com

    Trả lờiXóa