Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp

Tạo sitemap (sơ đồ) cho blogspot


Sitemap (sơ đồ)  một từ ngữ không quá xa lạ. Nhưng các bạn phải phân biết cho rõ nhé Sitemap mà các bạn gửi lên Google webmasters hay Bing webmaster … Các Sơ đồ đó có nhiệm vụ "khai báo" với các công cụ tìm kiếm những thông tin chứa trong đó. Như vậy, sẽ giúp cho blog SEO (tối ưu tìm kiếm) tốt hơn. Khi các công cụ tìm kiếm "quét" qua Blog, tiêu điểm sẽ là sơ đồ blog. <Bộ máy tìm kiếm>

Còn Sitemap (sơ đồ) mà mình hướng ngày sau đây nó giúp cho người đọc có một cái nhìn tổng thể về trang Blog đang truy cập... Nhờ có sơ đồ, người đọc dễ dàng tìm đến các chuyên mục và bài viết chứa những thông tin cần tìm kiếm. <Tăng trải nghiệm người dùng>

Đọc thêm:




Tóm tại Sitemap (sơ đồ) là một tiện vô cùng quan trọng là một giải pháp vời của một Blogger … Nó không khác gì một cuốn sách có MỤC LỤC, MỤC LỤC sẽ nói lên toàn bộ nội dùng của cuốn sách đó, người sẽ quyết định có ĐỌC hay là KHÔNG ĐỌC.

Vậy việc tạo 1 Sitemap (sơ đồ) chuyện nghiệp là một điều vô cùng quan trọng và hôm nay Windows2it sẽ giúp bạn là đều đó @! Ở bài viết này Windows2it sẽ đưa ra 2 phong cách cho các bạn lựa chọn.

☼ Cách tiến hành:

Đầu tiên bạn vào Blog => Trang => Trang mới => Chọn HTML và dán đoạn mã code dưới đây vào và chọn Xuất bản.

Code theo phong cách 1:

<style>
/* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc {
  margin: 0 auto;
  background-color: #FFFFFF;
  border: 4px dashed rgb(48, 167, 229);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  position: relative;
  color: #333;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color: #434B50;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:rgba(110, 193, 255, 0.68);
  color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color: #6EC1FF;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
    width: 80%;
  float: right;
  background-color: white;
  border-left: 2px dotted #30A7E5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
  position: relative;
  font-weight: bold;
  font-size: 14px;
  color: #434B50;
  line-height: 40px;
  height: 35px;
  padding: 0 12px;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color: #CAE6F2;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>

<br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://www.windows2it.com/" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Tabbed TOC">Blogging Tips and Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.windows2it.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://cdn.rawgit.com/quangmen93/Javhay.org/master/sitemap.JS" type="text/javascript"></script>

Demo phía trên mình thực hiện trên một trang chuyên biệt. Còn dưới đây là Demo mình thực hiện trực tiếp ở bài đăng cho các bạn tham khảo.

Loading...




Code theo phong cách 2:

<style>
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}</style>

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/quangmen93/Javhay.org/master/sitemap1.JS" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

Demo phía trên mình thực hiện trên một trang chuyên biệt. Còn dưới đây là Demo mình thực hiện trực tiếp ở bài đăng cho các bạn tham khảo.





☼ Tùy chỉnh

·        Thay Windows2it.com thành tên miền của bạn

·        max-results=9999 or maxResults: 99999 kết quả bạn muốn nó xuất hiện <ở đây là 9999 kết quả>

·        Còn mấy tùy chỉnh khác thì mình không cần nhắc tới <nó quá dễ đối với các bạn>

☼ Kết luận

·        Sử dụng 1 đoạn HTML, 1 đoạn CSS và 1 đoạn JS mở => khả năng tùy biến rất cao và linh hoạt.

·        2 phong cách trên mình đều để Demo trực tiếp trong bài cho các bạn tham khảo luôn

·        Ở 2 phong cách trên mình đã gộp cả 3 đoạn HTML, CSS và JS chỉ thực hiện trực tiếp trên 1 trạng chuyên biệt không cần phải chỉnh sửa template New!



Còn bạn nào muốn Support gì thì cứ để lại comment @!


Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

58 nhận xét:

  1. Replies
    1. Bạn thích màu nào >> thì thay đổi thôi mã màu là được :)

      Delete
    2. Ông này bên kimochi.info đây nè :v

      Delete

    3. Về cơ bản là rất ok. Nhờ hướng dẫn này của bạn tôi đã lập được blog www.webkienthuconline.blogspot.com trên nền tảng blogger. Cám ơn bạn rất nhiều!

      Rất mong được tư vấn và góp ý cho blog của mình được hoàn chỉnh hơn nữa!

      Delete
  2. Mình muốn đổi màu hồng thành màu khác có được không vậy bạn, mong bạn hướng dẫn mình

    ReplyDelete
    Replies
    1. Được nha bạn! bạn đổi đoạn CODE này #ffcfcc thành đoạn CODE chứa mã màu mà bạn muốn chuyển thành: Bạn xem mã màu tại đây nhé @!
      https://sites.google.com/site/wwwcaotongvn/css

      Delete
    2. Cám ơn bạn đã hướng dẫn, trả lời sớm thế :)

      Delete
    3. Mình làm việc online mà .... Cứ có bình luận là nó thống báo về gmail nên biết ngay :)

      Delete
    4. Vậy nhờ bạn giúp mình việc này mình đã gữi mail cho bạn rồi

      Delete
    5. mình đã check mail nhưng chưa nhận được... Bạn kiểm tra lại mail đã gửi chưa nhé ! :)

      Delete
    6. Đã trả lời mail của bạn rồi. Cần giúp đỡ gì vô đây liên hệ cho mình nhé. Chứ mail mình hổ trợ Bên khác do người khác quản lý nên mình ít quan tâm

      Delete
  3. Bạn cho mình hỏi muốn bỏ cột thứ hai thì làm sao thế ạ

    ReplyDelete
    Replies
    1. mình thấy thiết kế rất oke mà ... mà bạn muốn bỏ cột 2 ở phong cách 1 và phong cách 2

      Delete
  4. mình muốn đặt text link liên kết với blog của bạn, không biết ý bạn thế nào

    ReplyDelete
    Replies
    1. Blog bạn đâu cho mình xem thử ... có nội dung đen không ..mình mới trả lời bạn được chứ :)

      Delete
  5. Chắc cũ quá rồi. Tôi làm đúng như vậy, thay tên miền. Xem thử thì chỉ có cái khung xanh trắng tạo viền. Nội dung trắng. @@

    ReplyDelete
  6. À, Cảm ơn Windows2it rất nhiều. Mình thử lại theo cách 2 thì có lên nội dung rồi. Chắc cách 1 phải chỉnh trong HMTL gốc nữa.

    ReplyDelete
  7. windows2it, Mình không rõ bị xung đột gì nhưng blog mới thì hiển thị. Còn sửa vào blog cũ thì không hiển thị lên được. Hay do nội dung nhiều quá nên không cập nhập được?

    ReplyDelete
    Replies
    1. nhiều hay ít gì nó cũng hiển thị hết ... việc xung đột code là chuyện ko thể// mà Blog bạn đâu cho mình qua thử :)

      Delete
    2. Trang này http://www.dailybientandelta.com/ chưa được.
      Còn trang mới http://www.manhinhhmi.com/ đã ok
      Thanks

      Delete
    3. Sitep map đã chèn code nhưng không thấy kết quả:
      http://www.dailybientandelta.com/2013/06/sitemap.html

      Delete
    4. như thế này mình cũng bó tay ko giúp cho bạn được

      Delete
    5. Chuyện thường ngày ở phố huyện mà. Chắc đến giới hạn. Cảm ơn Windows2it

      Delete
    6. Kiểm tra link thì thấy báo
      The feed specified by http://www.blogger.com/feeds/1701811931275898605/posts/summary is not enabled
      =>>> có gì đó liên quan đến việc sử dụng link này thì phải.

      Delete
    7. thấy sitemap trang này: http://www.dailybientandelta.com/2013/06/sitemap.html
      vậy đẹp quá rùi còn gì :)

      Delete
  8. ad xem hộ em với em đã thêm vào blog http://dacsanruouque.blogspot.com/ mà khi em check chưa ra ạ

    ReplyDelete
    Replies
    1. Đưa cái link như vậy biết giúp bạn thế nào ... ít bạn cho mình cái link trang sitemap của bạn làm đó chứ

      Delete
  9. Bạn có thể cho đoạn mã vào khung hoặc cho mình xin file text của phong cách 2 được không? Mình dùng Smartphone coppy không chuẩn nên nó cứ bị lỗi! Cảm ơn bạn rất nhiều 😘

    ReplyDelete
  10. Copy tại đây nhé >>> sao ko dùng máy tính dùng Smartphone chu cho khổ vậy.!! :)

    ReplyDelete
  11. Qúa độc! hay thiệt, sitemap 1 đẹp gọn hơn ,nhưng lại o có ngày và số thứ tự.... sitemap 2 thì ngược lại, tóm lại quá hay//// Cám ơn nhiều... bạn làm cho đầu óc của mình sáng ra... thanks lần nữa!

    ReplyDelete
  12. Replies
    1. Nó báo như thế nào ??? mà ko được được .. Mà trang bạn thực hiện thủ thuật đâu cho mình xem qua mới giúp được chứ :)

      Delete
  13. Có cần phải submit lên Google không vậy Ad, nếu làm như Ad thì Google nó có index không vậy?

    ReplyDelete
    Replies
    1. Cái này google ko index nhé ! Bạn nên phân biệt rõ vấn đề này:

      - Sitemap mà các bạn gửi lên Google webmasters hay Bing webmaster … Các Sơ đồ đó có nhiệm vụ "khai báo" với các công cụ tìm kiếm những thông tin chứa trong đó. Như vậy, sẽ giúp cho blog SEO (tối ưu tìm kiếm) tốt hơn. Khi các công cụ tìm kiếm "quét" qua Blog, tiêu điểm sẽ là sơ đồ blog.

      - Còn Sitemap (sơ đồ) mà mình hướng dẫn ở trên nó giúp cho người đọc có một cái nhìn tổng thể về trang Blog đang truy cập... Nhờ có sơ đồ, người đọc dễ dàng tìm đến các chuyên mục và bài viết chứa những thông tin cần tìm kiếm trong blog của bạn.

      >> 2 sơ đồ hoàn toàn khác nhau nhé !!!

      Delete
  14. Chào bạn! Cảm ơn bạn đã chia sẻ, nhưng cái link file js không hoạt động được bạn à!

    ReplyDelete
    Replies
    1. Đã cập nhật file JS cho các bạn rồi nhé [email protected]!! Do google Host ko cho lưu nữa nên tất cả các file JS và CSS mình lưu lên googledrive sắp bị xóa hểt.... Chưa có thời gian cập nhật.. Nếu file JS hay CSS nào bị lỗi các bạn cứ comment ở bên dưới mình sẽ cập nhật lại cho các bạn ngay khi có thể !! Một lần nữa xin cảm ơn đã thông báo mình biết !!

      Delete
  15. Cảm ơn bạn ! Rất tuyệt, nhưng mình muốn thay chữ "DISPLAYING ALL 3 POSTS" thành tiếng việt thì thay chỗ nào bạn nhỉ

    ReplyDelete
    Replies
    1. Ở trong đoạn JS đó bạn ...
      khúc này nhé !!

      if (numDisplayed == postTitle.length) {
      var tocNote = 'span class="toc-note">Displaying all ' + postTitle.length + ' posts
      '; }
      else {
      var tocNote = 'span class="toc-note">Displaying ' + numDisplayed + ' posts labeled \'';
      tocNote += postFilter + '\' of '+ postTitle.length + ' posts total

      Delete
    2. Mình dùng mẫu 2 nhưng tìm không thấy chỗ nào giống đoạn bạn đưa ra. Bạn có thể thay mẫu Việt hóa mấy câu tiếng anh được không. Cảm ơn !

      Delete
    3. Sữa đoạn này nè bạn !! https://cdn.rawgit.com/quangmen93/Javhay.org/master/sitemap.JS .... Bạn sữa rồi up lên host của bạn ấy !! ... Chứ mình sữa phải up lên host của mình nữa !! Nhiều quá khó quản lý :P

      Delete
    4. Thế này thì mình chịu rồi, của mình là blogspot up lên có được không bạn nhỉ

      Delete
    5. Admin sửa giúp với rồi gửi vào Email [email protected] giúp mình được không. Cảm ơn !
      Nếu được bạn sửa giúp sang hết tiếng việt nhé

      Delete
  16. Tạo site map cho blogspot thì đã có mấy trang web tạo cho mình rồi, chỉ cần viết vài dòng bỏ vào website là xong

    ReplyDelete
  17. Sao em thử cho Blog của em là http://www.vin-city.vn không được là sao các Bác nhỉ :(

    ReplyDelete
    Replies
    1. Bạn đưa cho mình cai link tạo sitemap ấy để mình xem sao .... chứ đưa link trang chủ làm chi ???

      Delete
  18. Cái sitemap đầu tiên bị lỗi rồi chủ thớt ơi. Hức hức!! Mới bị thôi. Nó không load được

    ReplyDelete
    Replies
    1. Vẫn hoạt động rất tốt mà bạn :) .. Bạn xem lại y

      Delete
  19. Rất tuyệt, các thủ thuật của em anh đều làm thành công hết. Chúc Site của em luôn phát triển và em thì luôn thành công.

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. Em muốn bỏ một phần nằm bên trong post title có được không ạ ? ( Do em làm mục lục mà có phần không liên quan đến thì kỳ lắm ) Nếu có thì phải làm sao ạ ?

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete