Hướng Dẫn tạo SITEMAP (Sơ Đồ Trang) Đẹp Đỉnh cho Blogger Blogspot ~ blog chia sẻ kiến thức lập trình

Xin chào các bạn sơ đồ trang web (sitemap) đã quá quen thuộc với những ai biết đến SEO. Mình không nhắc lại khái niệm nữa và vào vấn đề chính luôn. Ở bài này VTADZ.COM sẽ hướng dẫn các bạn thêm sitemap vào blogger blogspot với giao diện cực ĐẸP . Lưu ý hãy để sitemap ở những vị trí dễ nhìn ở trang blog của các bạn. Như VTADZ để ở thanh menu rất dễ nhìn. SITEMAP này sẽ tổng hợp tất cả các URL của bài viết trên trang web của bạn sắp xếp theo từng nhãn (label) cũng rất tiện cho việc tìm kiếm thông tin và dữ liệu trên trang web.

DEMO các bạn xem trực tiếp tại http://www.vtadz.com/p/sitemap_2.html
DEMO hình ảnh

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.codeseo.net/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.vtadz.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<p style="display:none;"><a href="http://www.codeseo.net/">SEO</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.vtadz.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. CODESEO.NET sẽ giải đáp mọi thắc mắc của các bạn.

Nguồn: Terocket.com