Loading post navigation ...
 
 

Pro page

7
Nhận xét

Tạo nút nhấn cho phép ẩn hiển các widget khi click vào nó.

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Show/Hide widget using javascript

[FD's BLOg] - Với việc thêm 1 đọan code java nhỏ vào code của widget là bạn có thể tạo 1 nút liên kết nho nhỏ (nằm ở tiêu đề của mỗi widget) cho phép ẩn/hiện widget đó khi click.



Xem hình minh họa kết quả:


☼ Bắt đầu thủ thuật:
1. Vào bố cục (layout)
2. Vào chỉnh sửa code HTML(edit code HTML)
3. Chọn "mở rộng mẫu tiện ích" (expand widget template)
4. Tìm đọan code của widget mà bạn muốn chèn tiện ích này vào, như ở hình minh họa, mình sẽ áp dụng thủ thuật cho tiện ích Label, như vậy ta sẽ tìm code của nó, và bên dưới sẽ là code của nó:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


5. Và thêm code màu đỏ vào đọan code trên như bên dưới:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>

<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(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[▼/▲]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Lưu ý : có thể thay đổi code màu xanh theo ý bạn, cụ thể
+ [▼/▲] : đổi các kí tự ▼/▲ theo ý thích của bạn.
+ float:left;margin-right:5px; : đây là code xác định vị trí hiển thị của nút [▼/▲] trên tiêu đề của widget. nếu bạn muốn nó hiển thị bên phải thì sửa lại là float:right;margin-right:5px;

6. Save template.


Chúc các bạn thành công.


Enter your mail address:

7

Huy

Anh ơi ! mặc định nó hiện thì làm thế nào ạ

Huy

http://nqhuy90.blogspot.com/ - của em đây ạ

fandung-tester

muốn mặc định nó hiện thì em sửa dòng này :
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
thành:
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:block;">');
//]]>

Huy

Em cảm ơn anh :)) Đoạn code dài quá em chẳng chú ý :D

Nathan, P
Nguyên Luật

Anh Dũng có cách để cho người ta phải bấm mật khẩu định trước rồi mới thấy được widget k?

Unknown

Thủ thuật hay nhưng chắc những theme loại mới sau này không áp dụng được? Mình làm đi làm lại nhiều lần cũng chỉ hiện ra 2 cái nút mà không có tác dụng gì.Tiếc thật.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home