[Serial thủ thuật blog 1]Tạo nút nhấn cho phép ẩn hiển các widget (tiện ích) khi click vào nó

Tạo nút nhấn cho phép ẩn hiển các widget

56 thủ thuật blogspot dành cho blogger
Cách đến nhanh bài viết:
·  Nhấp chuột trái vào mục muốn xem.
·  Về đầu trang của Serial gồm 56 thủ thuật, nhấn nút
HomeSerial - Serial Thứ 1

[03]  Tạo nút nhấn cho phép ẩn hiển các widget (tiện ích) khi click vào nó

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.