Tạo Sitemap và Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger

[Tips] - Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger rất trực quan, đơn giản và dễ nhìn, đặc biệt chuẩn SEO dành cho Mobile

Terocket đã giới thiệu rất nhiều thủ thuật blog liên quan đến tạo Sitemap sơ đồ trang cho blogger blogspot rồi, hôm nay sẽ tiếp tục giới thiệu đến các bạn thủ thuật cùng chủ đề Sitemap sơ đồ trang này, và thủ thuật lần này sẽ được nâng cấp mức độ cao hơn, nhưng đơn giản hơn, trực quan hơn và trải nghiệm người dùng tốt hơn. Tên là Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger.

Live Demo

Với thủ thuật blog này, bài viết sẽ được tổng hợp theo phân mục nhãn Label, có nghĩa là các bài viết, khi xuất hiện sẽ được xuất hiện theo từng nhãn Label. Không xuất hiện đồng loạt và khó phân biệt như trước nữa. GIúp người đọc dễ phân biệt được các nội dung thuộc phần nào để dễ theo dõi hơn.

Cách trình bày của thủ thuật blog này Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger khá đơn giản, được trình bày theo dạng ngang lưới, gọn gàng và rất dễ nhìn, màu sắc chủ đạo là lam trắng, toát lên vẻ lịch sự, không làm người đọc bị lạc lối khi đọc vào.

Điểm lợi thế của thủ thuật Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger này đó là được thiết kế và thích ứng hoàn toàn các thiết bị di động, chuẩn Responsive. Chuẩn SEO, tốc độ tải nhanh khùng khiếp.

Giờ thì cùng Terocket thực hiện thủ thuật blogspot này nha cả nhà. Chắc chắn bạn sẽ rất hài lòng khi thấy Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger sau khi hoàn thành đó.

Bước 1 - Đầu tiên bạn cần tạo 1 trang page để chứa nội dung sitemap này

Blog Title → Trang → Trang mới → Vào phần HTML → Và copy nội dung code ở Bước 2 dưới đây vào và Xuất bản nhé.

Ví dụ, nếu Terocket tạo 1 sitemap cho người dùng, thì sẽ đặt ở địa chỉ là http://www.terocket.com/p/sitemap.html nha. Các bạn cần phân biệt được, sitemap cho người dùng và sitemap cho công cụ tìm kiếm hoàn toàn khác nhau đó.

Bước 2 - Copy đoạn code sau vào HTML của trang và xuất bản

<script src="https://googledrive.com/host/0B-0uHUanipfMMWlMUHJjcERkVFU" type='text/javascript'></script>
<script src="http://www.dichvumoigioitenmien.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<p style="display:none;"><a href="http://www.terocket.com/">Terocket</a></p>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>

Ghi chú: Hãy thay www.dichvumoigioitenmien.com thành địa chỉ blog hoặc website của bạn nha!

Ok, cuối cùng đã xong thủ thuật blogspot Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger rồi nhé cả nhà. Hy vọng cả nhà có thể thực hiện thành công thủ thuật này. Ai có vấn đề gì thắc mắc hoặc trao đổi, hãy gửi bình luận ở dưới đây nha. Terocket sẽ giải đáp mọi thắc mắc của các bạn.