Tạo Accordion Sitemap (TOC) cho Blogspot

Ngày Thứ Hai, 12 tháng 9, 2011 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tạo Accordion Sitemap (TOC) cho Blogspot
Chúc bạn xem tin tức vui vẻ !!

(Traidatmui.com) – Trước đây mình đã có lần giới thiệu đến các bạn thủ thuật tạo sitemap cho bài viết trên Blogspot do Abu-Farhan phát triển (bạn xem tại đây). 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.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS vào trước thẻ ]]></b:skin>

.judul-label{
text-transform:uppercase;
background: #616D7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSQ0OTyybROi1XVi70lGaJ_oy6IYvTVMudt34H45MSPJWRq_UWNBeMNv_EIInqlkxyn9jgdA6u9IgXTbEq2gfPUtJzB6vOBuqRcrmWkg-9prFXq5-luuL1vUi6HnNhDG82ryAu_Q0Qq5fX/) 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://traidatmui-tips.googlecode.com/files/accordion_sitemap2.js"></script>
<script src="http://www.traidatmui.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://traidatmui-tips.googlecode.com/files/accordion_sitemap.js" type="text/javascript"></script>

» Chỉnh code: Bạn thay (http://www.traidatmui.com) thành địa chỉ blog của bạn.

7. Cuối cùng save tiện ích lại

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