Loading post navigation ...
 
 

Pro page

4
Nhận xét

Ẩn/Hiện tab nội dung (Version 2)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Đây là một thủ thuật cải tiến từ thủ thuật "Tạo tiện ích đóng mở tab nội dung" (thực hiện online trên website flooble.com). Bài viết này sẽ thực hiện lại thủ thuật đó 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


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.


Enter your mail address:

4

Chinhnd

Bài này hay lắm, mình thử nghiệm ở weblog mình rồi post lên www.vnpressnet.com và quảng cáo luôn blog cuả FD nhé.

Chinhnd

À, cho mình hỏi luôn, nếu muốn có 2 widget dạng này trên cùng 1 blog thì làm thế nào, vì làm 2 cái là lỗi, chỉ 1 cái chạy.

fandung

Nếu anh muốn 2 cái widget chạy được ứng dụng này thì anh chỉ cần thay đổi code màu đỏ (expand). Ví dụ anh đổi lại thành expand1 chẳng hạn

Khách (ẩn danh)

cho hoi là tai minh muon ap dung menu cho dạng này nhưng mà để tạo menu con thì làm sao ... mong chỉ giáo !



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home