"Tạo tab nội dung đóng mở trên Blogspot"

(Traidatmui.com) - Hôm nay mình xin chia sẽ cùng các bạn cách để tạo một tiện ích với chức năng "Ẩn" và "Hiện" nội dung trên Blogger. Với tiện ích show/hide này thì bạn sẽ có thể tiết kiệm được phần không gian trên blog của bạn. Tiện ích này sẽ ẩn đi nội dung bên trong và chỉ hiển thị đầy đủ khi bạn click vào link được thiết lập sẵn. Thật ra thủ thuật này đã được Fandung đăng trên fandung.com, tuy nhiên có lẽ có một số bạn chưa tiếp cận được nên nay mình xin giới thiệu lại để các bạn tham khảo.

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Tiếp theo vào chỉnh sửa HTML
4. Chèn code bên dưới vào sau thẻ <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:#fff; /*màu text của tiêu đề tiện ích*/
padding-left:5px;
width: 511px; /*độ rộng của tiêu đề tiện ích*/
}
.expandcontent{
background-color: #ccc;
color: #000; /*màu text của phần nội dung của tiện ích*/
width: 510px; /*độ rộng của phần nội dung của tiện ích*/
}
</style>

5. Save template lại
6. Trở về phần tử trang và thêm 1 HTML/Javascript
7. Thêm code bên dưới vào tiện ích HTML/Javascript trên
<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>

8. Save lại là xong

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

Theo Fandung blog

Xem khác cùng chủ đề

5 nhận xét | Viết lời bình

1/30/2011 04:36:00 CH Trả lời

chúc bạn chén tết ngon miệng

7/24/2012 06:29:00 SA Trả lời

Chào bạn @traidatmui...! nếu mình dùng nhiều tag thì code thế nào..giúp mình nhé....thanks...!

Admin
7/24/2012 06:55:00 SA Trả lời

Bạn có thể thêm đoạn code ở bước 7 và chỉnh sửa 2 id expand_link và expand lại thành expand_link02 và expand02. Bạn chú ý là phải sửa hết các id expand_link và expand mà bạn tìm thấy trong code ở bước 7 nhé.

7/24/2012 07:28:00 SA Trả lời

Thanks bạn nhiều lắm...!

Admin
7/24/2012 10:50:00 CH Trả lời

;)

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang