Tạo nút nhấn cho phép ẩn hiển các widget (tiện ích) khi click vào nó
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
- 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:
- Thêm vào trước nó đoạn code sau:
- Và thêm vào sau nó đoạn code sau:
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:
Bước 5: Save template. (Lưu mẫu).
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ấ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).
Các bạn cảm thấy hay thì có thể share nếu không thực hiện được hay bất cứ lỗi gì có thể comment xuống bên dưới hay qua mục liên hệ. Xin chân thành cảm ơn.
Share This:
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
No Comment to " Tạo nút nhấn cho phép ẩn hiển các widget (tiện ích) khi click vào nó "