Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Wednesday, November 19, 2014

[Tips] - Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger

Hướng dẫn thủ thuật blog cách Tạo Sitemap / Sơ đồ trang dạng grid lưới ngang cho Blogspot Blogger tại Terocket. Một trong những thủ thuật blog hay nhất chuẩn SEO!

Chia sẻ:
[Tips] - Tạo Sitemap / 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.terocket.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;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.terocket.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.

Ở dưới đây có một số thủ thuật liên quan đến Sitemap cho blogspot, bạn xem tham khảo nha

  1. [Tips] - Bảng tổng hợp nội dung đầy đủ bằng nhãn Label cho Blogspot Blogger
  2. [Tool] - Tạo sitemap sơ đồ trang web cho Blogger Blogspot
  3. Sitemap 2 cột có phân trang cho blogspot
  4. Sitemap chọn nhãn tự động cho blogger
  5. Sitemap dạng bảng (Table TOC) cho blogspot v2
  6. Sitemap dạng input cho Blogger
  7. Tạo sitemap cho Blogspot theo ngày đăng và nhãn
  8. Sitemap là gì? Và tại sao bạn cần nó?
  9. Tạo Sitemap đẹp cho blogspot
  10. Tạo Accordion Sitemap (TOC) cho Blogspot style 2
  11. Accordion sitemap (TOC) cho blogger style 1

Trứng Vịt - Terocket

7 nhận xét:

  1. Nam cho mình hỏi. Mình đã đọc và xem rất nhiều bài hướng dẫn cách tạo site map danh mục bài đăng trong đó có các bài của bạn. Nhưng sau khi áp dụng, mình phát hiện có một chỗ là cuối site map luôn có dòng này: Designed by SaliproPham, Abu Farhan (màu trắng, có khi nằm ẩn và link về nhiều blogspot khác nhau tùy theo nguồn).

    Bây giờ mình muốn xóa nó đi thì làm thế nào, mình loay hoay cả chiều ko tìm ra cách xóa nó ngoài nofollow thì có thể làm được.

    Mong bạn hướng dẫn mình cách xóa dòng chữ đó. Nó để chế độ màu fff nên trùng màu nền, dễ bị GG phạt thì phải (đang nghi ngờ)

    Cảm ơn bạn

    ReplyDelete
    Replies
    1. Cái đó là credit của tác giả template, theo mình thì bạn nên giữ lại nhằm tôn trọng bản quyền của tác giả.
      Chỉ là vài 3 cái link ở chân trang thôi mà ko ảnh hưởng mấy đâu :D

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. anh ơi...anh giúp em sửa lỗi này không ạ..trang web của em nó bị đoạn code gì ấy làm cho mất phần comment của google và facebook anh ạ..em thêm bình luận của facebook vào không được anh ạ...anh xem giúp em trang này nhé ạ:http://www.loaphuong36.com/

    ReplyDelete
  4. Blog của mình thiết kế có được không? Các bạn cho ý kiến nhé: http://vietnamesebillionaire.blogspot.com/. Cảm ơn các bạn nhiều nhé!

    ReplyDelete
  5. Cảm ơn Bác, Em đã thử với www.xuanmaisparkstower.com và thành công. Tks!

    ReplyDelete
  6. Ad ơi mình làm theo rồi mà không thấy nút site map ở đâu trên web hết? giúp mình với

    ReplyDelete