» » Tạo Accordion Sitemap (TOC) cho Blogspot
Người đăng: | 09/05/2011 | 13:36

Tạo Accordion Sitemap (TOC) cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(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(http://lh5.ggpht.com/_BTztXRwC9ik/TNQPad_DI_I/AAAAAAAAEu4/wtICtukiAws/arrow-square-fd1.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://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/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

Tham khảo Abu-Farhan

Chuyên mục:

14 nhận xét

  1. Unknown9/26/2011 12:48:00 CH

    cái này của em. Nó cứ trải ra 1 loạt. :(. Nó không thu gọn lại anh à
    Thanks

    Trả lờiXóa
  2. Công Nghệ Thủ Thuật9/26/2011 12:52:00 CH

    Nó bị đụng chạm một code script nao rồi đó em nên bị xung đột không hoạt động được

    Trả lờiXóa
  3. Mr.phong9/29/2011 07:38:00 CH

    vậy sữa lại sao vậy admin

    Trả lờiXóa
  4. Huy Tập9/30/2011 01:50:00 CH

    anh ơi 1 nhã của em tới 500 bài thì no hiện hết à, làm sao phân trang cho nhãn đó hả anh

    Trả lờiXóa
  5. Công Nghệ Thủ Thuật9/30/2011 03:16:00 CH

    Tiện ích này không phân chia số bài viết ở mỗi nhãn được mà chỉ có thể giới hạn số bài tối đa hiển thị trong tiện ích này thôi em. Ở trên mặc định là tối đa có 1000 bài sẽ được hiển thị trong sitemap này em có thể tùy chỉnh lại một số tùy ý ở phần max-results=1000

    Trả lờiXóa
  6. Unknown9/30/2011 03:48:00 CH

    TĐM giúp mình với ! 2 bài trên cùng của mình bị lỗi. Nhấn vào link thì nó về trang chủ @@

    Trả lờiXóa
  7. Công Nghệ Thủ Thuật9/30/2011 04:27:00 CH

    @ Free times: Bạn tìm đến dòng code như bên dưới hoặc tương tự

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>

    Nếu thấy trong các thẻ <a> của code trên có chưa: expr:href='data:blog.homepageUrl'

    thì bạn thay nó thành expr:href='data:post.url'

    Trả lờiXóa
  8. Huy Tập11/19/2011 01:47:00 CH

    anh ơi của em khi click vào nó thả xuống rồi lại lên ngay,k kịp đọc các bài viết đã kéo lên rùi

    Trả lờiXóa
  9. Quyền2/27/2012 03:41:00 CH

    bị lỗi rồi a ơi .nó k gom lại đc ,các nhãn nó xổ za hết ak http://maritimesnew.blogspot.com/2012/02/hang-muc-hoat-ong-cho-mse.html

    Trả lờiXóa
  10. Công Nghệ Thủ Thuật2/28/2012 08:03:00 CH

    @ ĐiezEl: Mình đã xem qua site bạn chạy ok mà bạn.

    Trả lờiXóa
  11. Quyền2/28/2012 08:55:00 CH

    @ Trai Đất Mũi:dạ .hii .thường thỳ một số thủ thuật m mới làm xong nó vẫn chưa chạy đc ,pải chờ tjan .nhưng hôm nay thỳ nó hoạt dộng tốt rồi anh .thnks hướng dẫn nhiều nhé .chúc site có thêm nhieu bài hay hơm nha anh .chúc btoi ấm :(((

    Trả lờiXóa
  12. Unknown6/17/2012 04:42:00 CH

    Cài này nữa nó hiện ra mà ko thu lại đc kkrong

    Trả lờiXóa