[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
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ó
CÁCH THỰC HIỆN
Bước 1: Xác định ID widget muốn tạo nút ẩn/hiện
Bước 2: Chọn Mẫu > Chỉnh sữa HTML
<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.
