Cách tạo sơ đồ trang web cho blog mới nhất

Như các bạn đã biết không giống như các mã nguồn mở khác để tạo một trang sitemap ( Sơ đồ các mục của trang) trong Blogspot là hơi khó khăn chính vì vậy hôm nay blog TraiTimIT.COM sẽ hướng dẫn các bạn taọ một trang sitemap thực sự ấn tượng và chuyên nghiệp. Các bạn xem Demo  tại đây

Tạo trang sitemap định dạng hai cột

Để tạo được trang sitemap như TraiTimIT.COM đang sử dụng các bạn thao tác theo hướng dẫn sau:

Bước 1: Các bạn bấm vào "tạo trang"

Tại mục trang các bạn chọn tạo trang

Bước 2:  Ghi tiêu đề cho trang chuyển tab về chế độ soạn thảo HTML
rồi copy đoạn mã dưới đây vào vùng soạn thảo.

Ghi tiêu đề cho trang và chuyển về chế độ soạn thảo HTML

<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: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    = "JQuery",
    loadingText    = "Đang tải...",
    totalPostLabel = "Number of posts:",
    jumpPageLabel  = "Trang",
    commentsLabel  = "comment",
    rmoreText      = "Chi tiết►",
    prevText       = "Quay lại",
    nextText       = "Tiếp",
    siteUrl        = "http://www.traitimit.com",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/16094131351/sitemaps.js"></script>

Bước 3: Sau khi dán code vào khung soạn thảo các bạn tiến hành lưu và xuất bản để sitemap có hiệu lực.

tiến hành dán code vào khung soạn thảo sau đó lưu và xuất bản

Lưu ý: Các thông số trong khung màu đỏ có thể chỉnh sửa theo các tham số sau:

- Đầ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 http://www.traitimit.com thành URL blog của bạn.

- Để sử dụng lâu dài bạn hãy tải file sitemap.js về và upload lên host riêng cho dễ quản lý.

- postPerPage   = 10, là số bài viết tối đa hiển thị trên một trang. Vì SiteMap 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) nếu không thì số lượng bài viết ở 2 cột sẽ không bằng nhau.

- numChars = 150, số ký tự mô tả sẽ hiển thị.

- Để 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  nhãn Blogger thành tên nhãn bạn muốn hiển thị. Nếu muốn không sắp xếp theo nhãn thì để rỗng nhé!

Bước 4: Xuất bản trang của bạn và truy cập vào blog để xem thành quả của bạn.

Kết quả

Chúc các bạn thành công!