"Tạo Accordion Sitemap (TOC) cho Blogspot"

(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

Xem khác cùng chủ đề

14 nhận xét | Viết lời bình

9/25/2011 10:48:00 CH Trả lời

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

Admin
9/25/2011 10:52:00 CH Trả lời

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

9/29/2011 05:38:00 SA Trả lời

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

9/29/2011 11:50:00 CH Trả lời

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

Admin
9/30/2011 01:16:00 SA Trả lời

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

9/30/2011 01:48:00 SA Trả lời

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ủ @@

Admin
9/30/2011 02:27:00 SA Trả lời

@ 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'

11/18/2011 10:47:00 CH Trả lời

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

2/27/2012 12:41:00 SA Trả lời

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

Admin
2/28/2012 05:03:00 SA Trả lời

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

2/28/2012 05:55:00 SA Trả lời

@ 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 :(((

6/17/2012 02:42:00 SA Trả lời

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

Admin
6/18/2012 02:27:00 SA Trả lời

Nó xung đột code Jquery nào đó trong site bạn rồi

6/19/2012 06:06:00 SA Trả lời

Mình cũng nghĩ như thế :(

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang