Tạo tiện ích đóng, mở tab nội dung (ẩn hiện)

Người đăng: buonkhongem on Thứ Bảy, 25 tháng 4, 2009

Drop Down, Expandable Boxes For Widgets
[FD's BlOg] - Có nhiều thứ bạn có thể tìm thấy ở những widget của sidebar, nhưng vì lý do nào đó, một widget dữ liệu quá dài, khiến bạn phải rê chuột tìm kiếm các widget khác rất mất thời gian. Và vì lý do đó, bạn nên sử dụng tiện ích này.




Với tiện ích này, các widget sẽ được ẩn đi, và chỉ hiển thị 1 thanh Navbar với tựa đề của widget và nút đóng mở dữ liệu.

Các bạn có thể xem hình minh họa.


Để thực hiện thủ thụât này, trước hết bạn phải dán code bên dưới vào ngay sau thẻ <head>
- Đăng nhập blog
- Vào bố cục
- Vào chỉnh sửa code HTML
- Dán code bên dưới vào sau thẻ <head>

<!-- flooble Expandable Content header start -->
<script language="javascript">
// Expandable content script from flooble.com.
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '&#8722;'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->

- Save template lại.

Bây giờ là bước tạo code cho tiện ích này:
1. Bạn vào trang này : www.flooble.com

2. Kéo chuột xuống dưới bạn sẽ thấy 1 form như hình bên dưới:


3. Điền code vào trong khung, rồi nhấn get code.Lưu ý: code điền trong khung là code của widget mà bạn cần tạo để ẩn (hiện) nó.
4. sau khi nhấn code, kéo chuột lên trên ta sẽ thấy kết quả (như hình dưới)



- Bạn có thể tùy chỉnh về màu sắc sao cho vừa ý bạn, sau đó thì copy đọan code trong bảng thứ 2 (như hình bên dưới) rồi dán vào widget HTML/Javascript trong blog của bạn.


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

{ 0 nhận xét... read them below or add one }

Đăng nhận xét