"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>
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
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét