Sitemap trong blog là một phần rất quan trọng, ngoài chức năng sắp xếp bài viết một cách khoa học, nó giúp điều hướng độc giả trên trang của bạn, một sitemap đạt yêu cầu phải gọi được số bài đăng nhiều và sắp xếp khoa học đẹp mắt.
Sitemap 2 cột có phân trang cho blog
Bài viết này mình sẽ chia sẻ một Sitemap dạng 2 cột, kèm theo tiện ích phân trang bên dưới danh sách bài viết (xem hình minh họa bên trên). Điểm đặc biệt của tiện ích này mà nhiều người đánh giá cao là khả năng load bài viết mà không cần phải tải lại trang (xem demo ở link bên dưới) nhờ sử dụng hiệu ứng từ thư viện Jquyery.

View Demo

» Các bước tạo một sitemap đẹp 2 cột tích hợp phân trang cho blogspot.

Bước 1: Tại trang quản trị, các bạn vào tab Trang, => Bấm chọn Tạo trang mới (nếu muốn bạn cũng có thể chèn vào trong bài viết hoặc tiện ích HTML/javascripts.
Bước 2: Chuyển sang chế độ soạn HTML và dán đoạn code bên dưới vào phần nội dung:
<!--2 Column Sitemap by kjmagic.blogspot.com--> 
<style scoped="" type="text/css">
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:left;
}

#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}

.itemposts {
    float: left;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}

.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    font: bold 12px Arial;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
}
.itemposts h6 a{color: red;}
.itemposts h6 a:hover {
  color:#38f;
  text-decoration:none;
}

.itemposts img {
  background-color:#fff;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  float:left;
  height:65px;
  margin:0 7px 5px 0;
  padding:3px;
  width:65px;
  z-indent:99999px;
}

.itemposts .iteminside {}

.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
}

.itemposts .itemfoot a.itemrmore {
  color:#333;
  float:right;
  font-weight:bold;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {
  clear:both;
  padding:10px 0;
}

#pagination,

#totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0;
}

#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}

#pagination span.actual {background-color:black}

#pagination span.hidden {display:none}
</style>
<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "Blogspot-tips",
    loadingText    = "Loading...",
    totalPostLabel = "Tổng số bài viết:",
    jumpPageLabel  = "page",
    commentsLabel  = "comment",
    rmoreText      = "Chi tiết►",
    prevText       = "previous",
    nextText       = "next",
    siteUrl        = "http://kjmagic.blogspot.com",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/2812562314/kjmagic-2col-sitemap.js"></script>
<!--/2 Column Sitemap by kjmagic.blogspot.com-->
»Tùy chỉnh code:
  • Đầu tiên lưu ý với các bạn do code chèn thẳng vào HTML của trang do vậy sau khi thêm code bạn không được chuyển đổi qua lại giữa 2 tab Viết và HTML nếu không code bị thay đổi sẽ dẫn tới lỗi không thể gọi bài viết.
  • Thay chỗ mình đánh dấu thành URL blog của bạn.
  • Để sử dụng lâu dài bạn hãy tải file 2col-sitemap.js màu xanh về và upload lên host riêng tránh tình trạng hết banwidth nha. Nếu chưa có host bạn có thể đọc bài viết này để tạo cho minh một host miễn phí nha từ Google drive hosts.
  • postPerPage   = 10, là số bài viết tối đa hiển thị trên một trang. Vì site map dạng 2 cột do vậy để trông đẹp mắt bạn nên đặt nó là một số chẵn (chia hết cho 2) nha nếu không thì số lượng bài viết ở 2 cột sẽ không bằng nhau đâu.
  • numChars       = 150, số ký tự mô tả sẽ hiển thị.
  • Thay link ảnh màu xanh thành link ảnh đại diện cho những bài viết không có hình ảnh.
  • Thay link ảnh màu tím thành hình ảnh loadding khi tải bài viết cho tiện ích này. bạn có thể tham khảo bài viết này để tìm cho mình hình ảnh loadding thích hợp nha.
  • color:black; màu chữ phần mô tả, phần ngày đăng và số nhận xét . 
  • color:#38f; màu tiêu đề bài viết khi đê chuột vào tên tiêu đề. 
  • color: red là màu tiêu đề bài viết khi chưa dê chuột vào tên tiêu đề 
  • Để hiển thị bài viết theo nhãn bạn chỉnh sửa sortByLabel = false thành sortByLabel = true . Sau đó chỉnh sửa  Blogspot-tips thành tên nhãn bạn muốn hiển thị nha.
Bước 3: Xuất bản trang của bạn và truy cập vào blog để xem thành quả bạn đã đạt được nha.

Nếu có bất cứ khó khăn, vướng mắc gì khi áp dụng cho blog của bạn, vui lòng comment ở bên dưới để mình giải đáp và hướng dẫn chi tiết.
Xem thêm thủ thuật: kjmagic.blogspot.com