Hướng dẫn tạo Sitemap blogspot (Sơ đồ Blogger) mới nhất

May 3, 2024

Chuyên mục: Kiến thức Marketing/ Blogger

Sitemap là một trang quan trọng để các đọc giả tìm hiểu tất cả các bài viết trên một blog. Sơ đồ Blogger cũng có thể được gọi là mục lục của tất cả các bài viết trên blog của chúng ta.

Blogger)

Thực hiện theo các bước đó để thêm trang sơ đồ trang web trong Blogger. Làm tất cả các bước một cách cẩn thận.

Bước 1: Đầu tiên đăng nhập vào tài khoản Blogger của bạna chọn một trang web.

Bước 2: Nhấp vào Trang > Trang mới.

Bước 3: Bây giờ Thêm Tiêu đề Trang và Chuyển chế độ soạn thành Chế độ xem HTML.

Bước 4: Sử dụng 3 mẫu code sitemap sau đây mà mình chia sẻ để dán vào Trang vừa tạo.

Sitemap Style 1

<div id="bp_toc" style="overflow-x: auto;"></div>
<script src="https://cdn.rawgit.com/ns24h/js/master/sitemap.js"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc"></script>
<style>table {width: 100%;border: 1px solid #ddd;} .post-body td, .post-body th {text-align: left;font-size: 16px;padding: 5px 10px;border: 1px solid #ddd;} .post-body .toc-header-col1{width:60%} .post-body .toc-header-col2,.post-body .toc-header-col3{width:20%} .post-body td a{color:#333} .post-body td a:hover{color: #2196f3;} </style>

Tùy chỉnh: max-results=9999 là số lượng bài viết bạn muốn hiện thị. Hãy thay đổi theo nhu cầu hiển thị của bạn.Live Demo 1

Sitemap Style 2

Tùy chỉnh: var numposts = 100 là số lượng bài viết bạn muốn hiện thị. Hãy thay đổi theo nhu cầu hiển thị của bạn.Live Demo 2

Sitemap Style 3

<div class=”jontor”>
<script src=”https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js”></script>
<script src=”/feeds/posts/default?max-results=9999&alt=json-in-script&callback=teknomia_Load”></script>
</div>
<style type=”text/css”>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:”;border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px ‘Arial’;padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>

Tùy chỉnh: Tương tự mẫu 1.Live Demo 3

Bước 5: Xuất bản Trang Sitemap vừa tạo.

Trang Sơ đồ Blogger của bạn hiện đã sẵn sàng, mở lên xem kết quả thôi.

Kết luận

Đó là cách tạo một Sitemap blogspot (Sơ đồ Blogger) thú vị và phản hồi nhanh trên blog. Theo bạn, mẫu nào ok hơn, hãy tự quyết định cho mình 1 mẫu.

Hy vọng bạn sẽ thích bài viết. Rất mong bài hướng dẫn này sẽ giúp bạn có một hướng dẫn phù hợp để cài đặt sitemap blgospot cho mình. Đừng quên chia sẻ bài đăng này cho bạn bè của bạn hoặc để lại bình luận nhé. Xin cám ơn rất nhiều!