[Hướng dẫn] Tạo sitemap cho blogspot với hình thumbnails cực đẹp

Blogger Thủ thuật

{ 3 comments }

Tạo Sitemap cho Blogspot là một vấn đề khiến các blogger khá đau đầu. Trong bài viết trước mình đã giới thiệu tới các bạn tạo một Responsive Sitemap cực đẹp cho blogspot hiển thị theo nhãn (Labels) còn trong bài viết này các bạn sẽ được giới thiệu cách để tạo một Sitemap cho blogspot với hình thu nhỏ (thumbnails) khá đẹp.
Demo:

Sitemap for blogger/blogspot

Sitemap for blogger/blogspot

Vậy làm sao để thêm được một Sitemap với hình thu nhỏ (Thumbnails) đẹp như thế?

Bước 1: Các bạn hãy vào trang quản lý của Blogspot chọn blog mà bạn muốn tạo sitemap. Sau đó thêm một trang mới (Chọn Blank Page) đặt tên là Sitemap hoặc Sơ đồ trang web chẳng hạn.

Crealte Blank Page Blogger/Blogspot

Crealte Blank Page Blogger/Blogspot

Bước 2: Chèn đoạn code sau vào trang và click Cập nhật (Xuất bản)

<script src='https://my-server-film.googlecode.com/files/tohaitrieu.net-sitemap.js'> </script> <script style='text/javascript'> var numposts = 999; var showpostthumbnails = true; var displayseparator = true; </script> <script src="http://www.tohaitrieu.net/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>

Thay http://www.tohaitrieu.net bằng link trang web của bạn

  Lưu ý: Bạn có thể sử dụng cách này để tạo trang liệt kê bài viết cho từng labels (nhãn) để tăng mức độ thân thiện với công cụ tìm kiếm của google bằng cách thay đoạn code:

default?orderby=published

Bằng:
default/-/Your%20Label?orderby=published
Và thay Your%20Label bằng nhãn của bạn.

Xem thêm  Tự động đánh số thứ tự bài đăng phổ biến Blogger - Blogspot

Bước 3: Chọn Mẫu (Template) –> Chỉnh sửa HTML tìm đến đoạn sau:

Template Editor Blogger/Blogspot

Template Editor Blogger/Blogspot

 ]]></b:skin>

Thêm mã css này vào bên trên code trên:

.sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;}</b><b>.sitemap-container:hover {background-color:#fafafa;}</b><b>.thumbnail {width: 60px; height: 90px; float: left; top:0px;}</b><b>.posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;}</b><b>#postimg {margin-top: 10px;  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;}</b><b>#list{list-style: none; padding-left: 0px; margin-left: 0px;}</b><b>.li-pages{list-style:none;}

Sau đó Lưu (Save)
Bây giờ hãy truy cập đường dẫn http://www.blogcuaban.com/p/sitemap.html và xem kết quả nhé
  Lưu ý: Các bạn nên đặt tên trang là Sitemap thì url của trang sẽ ra là sitemap như vậy gọn gàng và đẹp hơn. Sau đó xuất bản. Để sửa tên của Trang thì bạn chọn trang và chỉnh sửa. Điều này không ảnh hưởng đến url của trang. Nếu bạn đặt tên trang ngay từ đầu là Sơ đồ trang web thì url của trang sẽ rất xấu và không như mong muốn đâu nhé, google có thể sẽ bỏ mất chữ đ trong url đấy.

Góp ý cho Tô Triều

  • Tuấn Nam 13/06/2015, 19:22

    Mình làm theo hướng dẫn nhưng thumnail và title nó lại không nằm cùng hàng mà thành 2 hàng. Có cách nào xử lý không Hải Triều. Cám ơn nhiều!

    Reply
  • xay nha 30/05/2014, 10:57

    chào bạn,
    mình đang tạo 1 blogger, muốn làm sitemap mà mình làm không được, mình làm theo hướng dẫn của bạn nhưng đến chỗ “Your%20Label” này mình không biết pải làm sao? vì label mình có khá nhiều kg biết pải làm sao?
    đây là trang của mình bạn coi và giúp mình với http://thietkethicongxaynha.blogspot.com/
    thanks

    Reply
    • Hải Triều 03/06/2014, 08:11

      Bạn cần hệ thống lại Label trong các bài viết nhé. Nên viết bài theo chủ đề, chủ điểm và không nên lạm dụng label quá nhiều gây nhiễu và khó lọc bài viết. Nếu label sử dụng tốt có thể làm được nhiều thứ có lợi cho SEO lắm