23 tháng 6, 2012

Tạo Accordion Sitemap (TOC) cho Blogspot


Tạo Accordion Sitemap (TOC) cho Blogspot
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 sitemap trước thì các bài viết sẽ hiển thị ra đầy đủ làm trang bạn rất dài, hôm nay với thủ thuật này thì chỉ có bài viết owe 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.

 Ảnh minh họa:
Tạo Accordion Sitemap (TOC) cho Blogspot
Cách tiến hành:

   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .
.judul-label{
text-transform:uppercase;
background: #616D7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlPvKAgohQHIywVgQa9v-NpcKmnE4p-T-UgxCGGE_TuDgr_AkjUNC2zJdYV3HxQj4261vUm4PZd2U8sSMjCmgexwJE_4WjKOhXdVb4WPv3_iB-7laknHVOyjfA9MgEbkl0Vll7ym2RhBus/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;
}
  5. Save template lại và trở về phần tử trang (Page Elements)
  6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<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>
Thay http://namkna.blogspot.com/ thành địa chỉ blog của ban.
 7- Sau đó bấm Lưu Mẫu lại. 
- P/s: Để áp dụn 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
Chúc thành công!

0 nhận xét:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets