0

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

56 thủ thuật blogspot dành cho blogger
Tạo Read More (Đọc tiếp) một cách tự độngCá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ó

Tạo nút nhấn cho phép ẩn hiển các tiện ích
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


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.


tác giả

Thích học hóa. End!@@. Nếu bạn thấy bài viết hay, thì hãy đăng ký nhận bài viết mới nhé.


Nếu bạn có vấn đề gì cần thảo luận vui lòng liên hệ: Contact Us.
♥ Facebook: https://www.facebook.com/Chemistry.and.pharmacy
♥ Youtuble :https://www.youtube.com/c/ChemistryMr
♥ Youtuble :My Love
♥ Youtuble :Like films
♥ Gmail: forumchemitry@gmail.com

Đăng nhận xét

 
Top