[03] Tạo nút ẩn hiện các widget (tiện ích) khi click vào
Nguồn: [FD's BlOg]
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.
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.
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.
0 nhận xét:
Đăng nhận xét