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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

5 nhận xét

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

    Trả lờiXóa
  2. 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...!

    Trả lờiXóa
    Trả lời
    1. 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é.

      Xóa
    2. Thanks bạn nhiều lắm...!

      Xóa