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>
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');">−</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>
<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');">−</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
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
chúc bạn chén tết ngon miệng
Trả lờiXóaChà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óaBạ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óaThanks bạn nhiều lắm...!
Xóa;)
Xóa