• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo trang mục lục bài viết theo nhãn với hiệu ứng đàn xếp

10
22/12/2010

Đối với các blogspot chứa rất nhiều bài viết thì mục lục bài viết sẽ rất dài và như thế sẽ gây khó khăn cho người đọc khi tìm bài viết. Hiệu ứng đàn xếp giúp cho mục lục bài viết trở nên gọn gàng hơn. Abu Farhan đã áp dụng hiệu ứng đàn xếp cho mục lục bài viết (Table of Content with Accordion) tuy nhiên có một điểm khiến nhiều blogger không thích trong tiện ích này lại là liên kết quảng cáo cho Abu Farhan (liên kết Widget by Abu Farhan).

Tôi nhận thấy thủ thuật này khá hay song vẫn trăn trở làm thế nào để áp dụng cho Blogger Việt Nam một cách hoàn hảo. Chỉ có một cách là tìm cách ẩn đi liên kết quảng cáo cho Abu Farhan. Người ta thường nói, hữu xạ tự nhiên hương, cho nên việc xóa đi liên kết quảng cáo này là điều có thể chấp nhận được.

Đây là Demo của Abu Farhan. Và đây là Demo của tôi.

Nếu bạn thích tạo trang mục lục với hiệu ứng đàn xếp do tôi điều chỉnh thì hãy thực hiện như sau.

Đặt toàn bộ đoạn code dưới đây vào một trang item hay trang tĩnh (static page) ở chế độ chỉnh sửa HTML.

<style type='text/css'>
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.post-footer, #blog-pager, #comments,#disqus_thread{display:none;}
h3.title-header {float:center;text-align:center;font-size:15px}
</style>
<script src="http://hacodeproject.googlecode.com/files/bloggertocaccordion.js"></script>
<script src="http://huynh-nhat-ha.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://hacodeproject.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn.

{10 bình luậnAdd yours ?}

Lygiaquan
12:56:00, 23 thg 12, 2010

cái này chèn sao hix và chèn ở đâu vậy nè

Reply
13:30:00, 23 thg 12, 2010

Bạn đặt toàn bộ code vào công cụ đăng bài viết của Blogger chứ vào đâu bạn, dễ quá phải k nào.

Reply
10:39:00, 12 thg 1, 2011

mình đã làm thử, đã được, nhưng do blog mình chia 3 cột nên khi hiện cái tiêu đề bài viết dài thì tiều bị đưa sang bân cột kế bên, có cách nào chỉ hiện thị vài chữ đầu của tiêu đề ko bạn ?

Reply
11:08:00, 1 thg 2, 2011

Mình đã test, cũng hiện đầy đủ các nhãn nhưng chỉ có một nhãn hiện bài viết, bạn chỉ cách khắc phục giùm mình nha, và đây là trang mục lục của mình:
http://www.nguontrithuc.tk/p/muc-luc-bai-viet.html

Reply
00:45:00, 26 thg 7, 2011

Chào bạn!
khi mở trang blog lên thì nó tự động show 1 label.
tôi muốn khi mở trang blog lên nhưng không mở nhản nào hết chỉ khi nào chọn thì mới mở thì phải làm sao rất mong bạn giúp đở.
cám ơn bạn trước.

Reply
10:06:00, 26 thg 7, 2011

Điều đó còn phụ thuộc vào việc bạn muốn trang chủ bố trí như thế nào bạn à. Cái này k thể nói sơ sài để bạn hiểu được. Cần phải có một bài viết thật chi tiết. À mà bạn muốn khi mở blog lên k mở phần nào hết, thế thì mở phần nào vậy ??? :51)

Reply
18:18:00, 1 thg 10, 2011

Thanks bạn.
Cái mục lục này nhằm mục đích ẩn / hiện các label click chuột vào phải ko?
Nhưng mình không thấy nó hoạt động ở trang của mình. Bạn chỉ giúp nhé!
http://shareallworld.blogspot.com/p/toc.html

Reply
10:18:00, 16 thg 3, 2012

anh oi anh cho e xin cai form dang ki cho blogspot dc ko a

Reply
07:05:00, 17 thg 7, 2012

chẳng có cái nào áp dụng được cho blog ngoài loại tin tức cả!:7)

Reply
18:23:00, 7 thg 8, 2012

Sao Em làm ko được ạ. Anh Xem Giúp Em ạ. :(
Sơ Đồ Trang WebSite

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn