Tạo Widget tiện ích đóng mở tab nội dung

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ủa vnpressnet.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

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.