Làm thế nào để các nhãn bài viết hay một danh sách các link được tạo bằng các tiện ích này có thể đóng/mở (ẩn/hiện) chỉ bằng một thao tác nhấn chuột? Với một danh sách liên kết thật dài, hay một blog có rất nhiều nhãn bài viết ví dụ như blog này, việc cho chúng ẩn đi sẽ làm giao diện blog trở nên gọn hơn. Khi người đọc có nhu cầu họ dễ dàng click xem nội dung.
Công việc có thể tiến hành qua các bước:
Bước 1. Đăng nhập Blogger, hãy kiểm tra bạn đã dùng tiện ích Label (Nhãn) nào chưa trên Layout (Trình bày). Nếu chưa nhấn Add a Page Element (Thêm phần tử trang) để thêm.
Bước 2. Nhấn Edit HTML (Chỉnh sửa HTML) để sao lưu template bạn đang dùng.
Bước 3. Chép đoạn code phía dưới đây dán phía trên thẻ </head> trong khung Edit Template (Chỉnh sửa mẫu) và lưu lại.
<style type='text/css'>
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown")
{ whichpost.className="commenthidden"; }
else
{ whichpost.className="commentshown"; }
}
</script>
Bước 4. Nhấn vào ô Expand Widget Templates (Mở rộng mẫu tiện ích). Bây giờ hãy tìm vị trí của từ khóa id='label1' (Dùng hai phím Ctrl + F để hiện hộp thoại và tìm kiếm với từ khóa này). Nếu bạn sử dụng cho nhãn thứ hai hãy dùng từ khóa id='label2'.
Đoạn mã mà bạn nhìn thấy sẽ như bên dưới.
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Bước 5. Hãy bổ sung phần chữ in đậm vào đúng vị trí hoặc bạn chép hết code này thay thế đoạn code trên và thay đổi những chữ màu đỏ và xanh (nếu cần).
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[+] MỞ</a>
<div class='commenthidden' id='PHANLOAI'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[-] ĐÓNG</a>
</div>
</b:includable>
</b:widget>
Giải thích thêm, các chữ màu đỏ PHANLOAI là một tên phân biệt duy nhất, giống nhau ở một tiện ích, bằng tiếng Anh hoặc Việt không dấu. Không trùng khi bạn dùng kiểu hiện thị này cho nhiều tiện ích khác. Nghĩa là nếu bạn dùng cho hai tiện ích nhãn ở cùng một blog, bạn phải đặt chúng phân biệt, chẳng hạn PHANLOAI1, PHANLOAI2. Chữ màu xanh [+] MỞ hay [-] ĐÓNG là chữ hiển thị mà bạn nhìn thấy trên blog. Thật ra giữa mở và đóng chỉ có một đoạn code, bạn nhấn trên [+] MỞ khi danh sách nhãn bài viết hiện ra cũng chính là đóng!
Tương tự bạn có thể tìm với từ khóa id='LinkList1', id='HTML1' ... nếu muốn ẩn các tiện ích Link List, HTML/JavaScript...
Chúc thành công!
Hi hi, cám ơn anh vì bài viết này.
ReplyDeleteTrời đất ơi! Đầu năm viết bài này độc quá xá. Đúng là loại "bùa" tôi đang tìm..hì..hì..vậy là năm nay tôi gặp hên rồi. Thanks pác một phát cái đã!
ReplyDeleteA, mà tôi đã xem qua slide show của 4all2all rồi..hà..hà..vậy là tôi đã biết mặt 1 trong 3 sư phụ của tôi rồi. Còn thiếu anh Khánh và Anh Võ nữa thôi. Nhưng..tại sao họ lại không có mặt vậy cà???
@leducthang, Hahah, quá khen! Chưa nhận đệ tử mà làm sao để được gọi sư phụ sớm thế?
ReplyDeletehì..hì..trên đời này chỉ có loại hèn hạ mới học của người ta mà chối bỏ thôi. Tôi tuy thiếu kiến thức nhưng không thiếu liêm sĩ. Tuy các anh chưa một lần biết mặt tôi làm sao nhận tôi làm đệ tử được. Nhưng nếu không có các anh thì www.leducthang.com cũng không có hôm nay. Dù các anh có nhận đệ tử hay không thì tôi cũng đã học lóm võ công của môn phái "Blogspot" quá nhiều rồi. Nếu sau này LeDucThang.com có được chút "tên tuổi" thì cũng nên để cho thiên hạ biết một phần lịch sử của nó chứ.
ReplyDelete@leducthang, nói cho vui thôi! Anh Thắng mạnh lời quá không khéo mọi người lại trách!
ReplyDeletecám ơn anh Nhân, bài viết này hay lắm. Năm mới mà anh mừng tuổi anh em bằng 1 bài đinh thì quá tuyệt.
ReplyDeleteAnh có mã nguồn của cái widget Label ko anh. Em muốn tạo một mục phân loại theo chủ đề theo cách sắp xếp là gom các nhãn liên quan vào một chủ đề (ví dụ: chủ đề Giải trí: Clip vui, Ảnh vui, videos...) nhưng em ko biết làm sao để trên từng nhãn có hiện luôn cả số bài viết giống như widget label ban đầu. anh có thể vào trang www.10a1zone.uni.cc để hiểu rõ hơn rùi chỉ dẫn em với.
ReplyDeleteCó điều này em muốn biết, mong anh chỉ giúp, em cám ơn anh nhiều:
ReplyDeletecó script nào để làm đóng mở các mục nằm trong phần Labels chứ không phải mục Labels không?
Anh thuthuatblog có script nào để làm đóng mở các mục nằm trong phần Labels chứ không phải mục Labels không? chỉ giúp em với
ReplyDeleteỒ em đã hiểu được cách rồi. Cám ơn anh
ReplyDeleteHình như cách này không áp dụng được cho Linklist 2, 3... anh ạ
ReplyDelete@cookingand, linklist2, 3 trở đi em chỉ cần sửa lại cái chữ PHANLOAI. Sửa nó thành tên duy nhất, ví dụ: PHANLOAI1, PHANLOAI2, PHANLOAI3...
ReplyDeleteoh em cám ơn anh nhiều
ReplyDeleteAnh Nhân ! Vô cùng cám ơn. Hy vọng anh sẽ sớm trở lại với cộng đồng Blog...
ReplyDeleteThanks your ,
ReplyDeletecam on ban ve bai viet huu ich nay!
ReplyDeleteBác Nhân ơi, em làm ko đc, sau khi em 3 bước: 1, 2, 3. sau khi nhấp vô Expand Widget Templates, và tìm kiếm thì ko thấy cái dòng mà anh chỉ đâu hết, giờ làm sao đây anh. giúp em vs
ReplyDelete@Đặng Thế Cường, nhớ check cái lưu ý, chắc chắn sẽ tìm thấy, dùng đồng thời phím Ctrl + F để tìm, đừng dùng mắt thường khó mà tìm thấy!
ReplyDeleteTôi đã làm theo hướng dẫn nhưng đến bước ctrl+F thì báo không tìm thấy " id=label1 & 2 " nên không thể tạo các bước kế tiếp. Như thế tôi có phải thay Template mới không, template hiện thời " Rounders" xin hãy ghé qduc.blogspot.com xem hộ & hướng dẫn giúp.
ReplyDeleteXin lỗi vì tôi không chèn thêm phần " Đọc thêm " vào Edit nữa vì thấy đã gọn nhưng vẫn giữ cấu trúc đã học từ Bạn, đừng giận nhé.
Trang của Bạn & " Bạn Bè " đúng là Ngọc Quý của thế giới Blog Việt tôi Chân Thành Cám Ơn những gì Bạn đã & đang thực hiện.
QDuc.
@Anonymous, bạn không đặt nhãn (Label) cho bài viết và cũng không cho hiển thị tiện ích Label trên blog nên đương nhiên bạn không tìm thấy.
ReplyDeleteĐể người đọc dễ xem chúng ta tạo phân loại cho mỗi bài viết. Hôm nay chúng ta viết một bài về kinh tế, chúng ta "dán" nhãn cho nó "Kinh tế", một bài khác về xã hội dán nhãn "Xã hội". Ngày mai một bài viết khác nữa mang nội dung kinh tế được đưa vào nhãn "Kinh tế". Tất cả thông qua tiện ích Label (Nhãn). Thêm vào bằng cách trên Layout, nhấn Add a gadget | Label.
Cám ơn bạn đã động viên, mong bạn thường xuyên theo dõi nội dung trên blog.
Thân,
ReplyDeleteMình thử lại xem sao. Cám ơn Bạn đã ghé nhà. Bạn cho phép mình chèn trang của Bạn vào " Blog Bạn Bè " nếu được mình sẽ tạo " Trang Quý " này.
ban oi ban da giup minh lam 1 topic ve "next page" "previous page" chua ban?ban giup minh cang som cang tot nhe
ReplyDeleteThông báo lỗi XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".
ReplyDeleteGặp lỗi này hoài
Anh ơi! Anh chỉ em làm sao để tạo 1 trang giống như trang phân loại của anh được hok. Ý của em la trong trang chỉ hiển thị tiêu đề bài viết hoặc label thoi chu không hiển thị nội dung, khi nào click vào mới hiện lên nội dung bài viết. Em là người mới tập tành làm blog, mong anh giúp em.
ReplyDeleteEm cũng xin cám ơn anh vì trong blog nay có rất nhiều bài viết hay giúp cho em rất nhiều.
Avatar Mod
ReplyDeleteHack Xu
Avatar Hack Lượng
Hack Avatar 197
Hack Army
Avatar Hack New
sao giao diện của blog mình hoàn toàn khác mà anh nói tiếng anh mình không hiểu, ko phải vì ko biết tiếng anh mà vì blog mình là tiếng việt nên google dịch ko xác nghia nen ko biết náo nằm chỗ nào nữa
ReplyDeletehelp me