[03]
Thủ thuật: Tạo nút nhấn cho phép ẩn hiển các widget (tiện ích) khi click vào nó
Nguồn: [FD's BlOg]



Giới thiệu: Bằng việc chèn đoạn mã code java nhỏ vào code của widget trong Edit HTML là bạn có thể tạo một nút liên kết nằm ở tiêu đề của mỗi widget cho phép ẩn/hiện widget đó khi click vào.


CÁCH THỰC HIỆN

1. Đăng nhập Blogger

2. Chèn script

Bước 1: Xác định ID widget muốn tạo nút ẩn/hiện



- Chon Bố cục.
- Bấm Chỉnh sữa vào widget muốn lấy ID.
- Nhìn lên thanh địa chỉ, dòng chữ phía sau cùng chính là ID của widget.


Bước 2: Chọn Mẫu > Chỉnh sữa HTML

- Bấm Ctrl+F > Gõ ID của widget muốn tạo nút ẩn/hiện.
- Khối code tìm được có dạng tương tự như sau:

<b:widget id='BlogArchive1' locked='false' title='Lưu trữ Blog' type='BlogArchive'/>
............ .....
</b:widget>

- Ví dụ: ID widget ở đây mình muốn thao tác là BlogArchive1


Bước 3: Tìm trong khối code đó đoạn code:

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

- Thêm vào trước nó đoạn code sau:

<!-- Nút ẩn/hiện widget (1) -->
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left; margin-right:5px;">');
//]]>
</script>[▼/▲]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>

float:left // Nút ẩn/hiện nằm bên trái.
margin-right:5px // Khoảng cách nút cách tên widget về phía tay phải là 5px.

- Và thêm vào sau nó đoạn code sau:

<!-- Nút ẩn/hiện widget (2) -->
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

display:none // Ẩn sẵn, click vào nút ẩn/hiện mới hiện.
display:block // Mặc định không ẩn, click vào nút ẩn hiện để ấn nếu muốn.

Bước 4: Tìm tiếp dòng code <b:include name='quickedit'/>

- Thêm vào trước nó đoạn code sau:

<!-- Nút ẩn/hiện widget (3) -->
<script type='text/javascript'> //<![CDATA[ document.write('</div>'); //]]> </script><script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>

Bước 5: Save template. (Lưu mẫu)

THE END.