Tạo nút đóng mở các tab nội dung của widget

( 24ahz.com) - 

Thủ thuật "Tạo tiện ích đóng mở tab nội dung" được thực hiện online thông qua website flooble.com. Tuy nhiên với sự cải tiến của FanDung, một blogger mới với rất nhiều thủ thuật hay cho Blogspot, thủ thuật "Tạo tiện ích đóng mở tab nội dung" sẽ thực hiện trực tiếp trên blog của bạn mà không cần thông qua web trung gian.

Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/hide-show-tabcontent.html Bạn có thể tham khảo danh sách các thủ thuật khác củavnpressnet.com tại đây 

Tạo tiện ích Widget cho Blogspot: 
► Tạo Shoutbox để chat trực tiếp với khách thăm blog
► Widget Dịch tự động cho Blogger
► Công cụ hiển thị khách thăm Blog

Hình minh họa► Bắt đầu thực hiện thủ thuật: 
1. Đăng nhập blog 
2. Vào bố cục (Layout) 
3. Vào chỉnh sửa code HTML (edit code HTML) 
4. Chèn đọan code bên dưới vào trước thẻ đóng </head> 

<script language="javascript"> var ie4 = false; if(document.all) { ie4 = true; } function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } } function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId); if (lText == '+') { link.innerHTML = '-'; d.style.display = 'block'; } else { link.innerHTML = '+'; d.style.display = 'none'; } } </script> <style type="text/css"> .expandtitle{ background-color: #999; color:#000; padding-left:5px; width: 300px; } .expandcontent{ background-color: #ccc; color: #000;width: 300px; } </style>

- Thay đổi độ rộng (width: 300px;) cho phù hợp với sidebar của bạn. 5. Save template. 6. Tạo widget HTML/Javascript và dán code HTML bên dưới vào: 

<div class="expandtitle" > <table border="0" cellspacing="0" cellpadding="2" width="100%"> <tr> <td> Title widget (tiêu đề của widget) </td> <td align="right"> [<a title="show/hide" id="expand_link" href="javascript: void(0);" onclick="toggle(this, 'expand');">&#8722;</a>] </td> </tr> </table> </div> <div id="expand" style="padding: 3px;" class="expandcontent" > {YOUR WIDGET CONTENT} (nội dung của widget) </div> <script language="javascript">toggle(getObject('expand_link'), 'expand');</script>

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

Theo Fandung blog

Nguồn : vnblognet

Nếu bạn gặp khó khăn về ngoại ngữ hãy coppy tên try cập ( link ) của trang hoặc đoạn văn bản cần dịch dán vào trang Google dich . Xin cảm ơn các bạn đã ủng hộ chúng tôi !