Tạo Accordion Sitemap (TOC) cho Blogspot style 2
Hôm nay cũng cách tạo sitemap cho Blogspot, nhưng ở bài viết này chúng ta sẽ tạo thêm một hiệu ứng cho nó. Đối với style 1 trước đây thì giao diện còn hơi xấu, hôm nay với thủ thuật này thì chỉ có bài viết ở trong một nhãn hiển thị đầy đủ, ở các nhãn khác sẽ được ẩn đi, và nó sẽ trượt xuống đầy đủ khi bạn click vào nhãn. Thủ thuật này rất tiện ích, sẽ không phải kéo dài trang của bạn.
Xem Demo bên dưới để thấy rõ hơn:

XEM DEMO

Ảnh minh họa:
Tạo Accordion Sitemap (TOC) cho Blogspot

Cách thêm accordion site map (Toc) cho blogger 

1. Đăng nhập vào tài khoản Blogger
2. Vào Trang (Trang)
3. Chọn Trang mới => Trang trống
Tạo thêm trang cho blogger - Hướng dẫn tạo thêm trang cho blogspot cực đẹp và nhanh
4. Check vào phần HTML của trang vừa tạo và dán đoạn code bên dưới vào:
<style>
.judul-label{
text-transform:uppercase;
background: #616D7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwnUCpPpRwXGniGuQ2DQF_HGJL_27Q2a9j6INr_OMNl2c9jB3pC9jxkiewv4eNlWe6iKodvSOWJtgfDZO6VI5DW-_QGfds2vNaZFci09hIwtxNSt8JCCBhRhIK6e88iaqbhnljyErNnXsS/s1600/arrow-square-namkna-blogspot-com.gif) no-repeat right -51px;
padding: 5px 27px 5px 8px;
margin: 0px;
font: bold 12px Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color:#fff;
}
.data-list a{color:#333;}
.data-list a:hover{color:#7a1d18;}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:2px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.headactive{
border-bottom:solid 1px #c4c4c4;
background-position: right 5px;
background-color: #959999;
color:#000;
}
</style>
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/accordion_sitemap2.js"></script>
<script src="http://namkna.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/accordion_sitemap.js" type="text/javascript"></script>

Tùy chỉnh:

  • Thay http://namkna.blogspot.com/ thành URL blog của bạn
  • max-results=1000 là số bài hiển thị.
5- Xuất bản trang cà xem thành quả nha.
-Lưu ý: Để áp dụng thủ thuật này bạn phải tạo feed cho blogspot, nếu chưa tạo feed bạn tham khảo bài viết Tại đây. nhược điểm của kiểu site map này là chỉ hiện thị được tối đa 1000 bài đăng, và load hơi chậm vì nó sử dụng 2 file Javarscrip. nếu muốn dạng khác load nhanh và đẹp hơn thì bạn tham khảo bài viết khác tại đây