Home » Thủ thuật blog
Tạo nút nhấn cho phép ẩn hiển các widget khi click vào nó.
Thứ Tư, 13 tháng 5, 2009
[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("' + 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>
<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.

- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
- Thêm chia sẻ Like và share bài viết cho blogspot [trên trang itviet360]
- Thêm nút theo dõi (Follow) cho blogspot
- Feedburner Google và cách lấy tùy chỉnh cho blogspot
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
Comments[ 0 ]
Đăng nhận xét