Thủ thuật tạo trang FAQ : Nhảy tới phần trả lời tương ứng khi click vào 1 câu hỏi

Theo yêu cầu của bạn Minh Triết (coitre.blogspot.com)

[FD's BlOg] - Thủ thuật này sẽ hỗ trợ các bạn thực hiện 1 trang FAQ (Frequently Asked Questions - Các câu hỏi thường gặp) trông pro hơn với việc nhảy đến câu trả lời của câu hỏi đó khi bạn click chuột vào. Thủ thuật này không phải là mới, tuy nhiên chưa có ai phổ biến, và nhân tiện có người hỏi về vấn đề này nên mình post bài hướng dẫn luôn.

Thực ra thủ thuật này rất đơn giản, ko hề sử dụng CSS hay JS mà chỉ đơn thuần là HTML.
Các bạn có thể xem demo ở đây: http://fandung.110mb.com/test/test_FAQ.html

Hình ảnh minh họa:

Trong hình mình có giới thiệu 2 cách, 1 là các bạn có thể tạo 1 dòng phân trang (dạng Page Navbar) rồi click vào, 2 là nhấp thẳng vào câu hỏi để đến với câu trả lời.

☼ Và đây là code của thủ thuật:

//Dạng hiển thị theo cách 1
Câu <a href="#Cau1">1</a> | <a href="#Cau2">2</a> | <a href="#Cau3">3</a> | <a href="#Cau4">4</a>

//Dạng hiển thị theo cách 2
<a href="#Cau1"> 1</a>
<a href="#Cau2"> 2</a>
<a href="#Cau3"> 3</a>
<a href="#Cau4"> 4</a>

//Nội dung
<a name="Cau1"></a>Tiêu đề câu 1
{Nội dung trả lời câu hỏi 1}

<a name="Cau2"></a>Tiêu đề câu 2
{Nội dung trả lời câu hỏi 2}

<a name="Cau3"></a>Tiêu đề câu 3
{Nội dung trả lời câu hỏi 3}

<a name="Cau4"></a>Tiêu đề câu 4
{Nội dung trả lời câu hỏi 4}

- Ta để ý sẽ thấy, muốn nhảy tới vị trí định sẵn khi click vào link của câu 1 thì ta chỉ cần thêm thẻ <a name="Cau1"></a> trước nội dung của câu 1.
- Lưu ý: bỏ phần chú thích khi thực hiện

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

More about →

Tạo "Bộ từ khóa tự động" cho bài viết

[FD's BlOg] - Một thủ thuật mà Anhvo đã xuất bản từ lâu rồi, nay theo yêu cầu SEO blog của 1 vài bạn, nên mình xin được phép post lại thủ thuật này. Ngoài việc cập nhật thêm 1 ít từ khóa, mình còn chỉnh sửa 1 chút về file javascript của Anhvo.

Bộ từ khóa tự động là một trong những công cụ cho phép hiển thị các từ, cụm từ trong bài viết trùng với thư viện định sẵn. Như thế độc giả dễ dàng tìm đến các vấn đề khác mà bài viết có đề cập tới. Đây cũng là 1 cách để tăng traffic cho blog của bạn.

Hình ảnh minh họa:

☼ Sau đây là các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HMTL
3. Chọn mở rộng mẫu tiện ích
4. Tìm đoạn code sau:

<data:post.body/>

5. Thay đoạn code vừa tìm được bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<data:post.body/>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post_body'>
<data:post.body/>
</div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script src='http://data.fandung.com/js/keywords/keyword01.js' type='text/javascript'/>

<script src='http://data.fandung.com/js/keywords/keyword02(2).js' type='text/javascript'/>

<div style='border:1px silver dashed; background:#FFFFCC; padding:5px'>

<script type='text/javascript'>
home_page2 = &quot;fandung.blogspot.com&quot;;
keyword_text = &quot;<b>Từ khóa :</b> &quot;;
window.onLoad = makeKeywordForPost(&quot;post_body&quot;);</script>

</div>

</b:if>

- Thay dòng code fandung.blogspot.com thành địa chỉ URL của blog bạn.

6. Save template.

Một vài lưu ý nhỏ:

a. Thêm các từ khóa của bạn vào file keyword01.js
Do nội dung của mỗi blog khác nhau, vì thế các từ khóa sẽ khác nhau. Để cho tiện ích hiển thị tốt các từ khóa có trong các bài viết ở blog của bạn, thì bạn phải tự bổ xung các từ khóa riêng biệt trong blog của mình. Để làm điều này, các bạn thực hiện các bước như sau:
- Tải file javascript keyword01.js về máy của bạn.
- Dùng Notepad để mở nó lên :(như bên dưới)

- Để thêm các từ, bạn chỉ việc thêm từ khóa vào trong dấu ngoặc kép (ví dụ : "Vui Cười", ) , nhớ sau mỗi từ khóa bạn thêm vào phải có dấu phẩy (,) theo sau. Chỉ từ khóa cuối cũng là không có dấu phẩy theo sau.
- Sau khi bổ xung xong các từ khóa, save file JS đó lại và upload nó lên 1 host nào đó. Nếu bạn nào ko có host có thể dùng host free như mình (http://www.110mb.com), rất dễ để đăng kí.

b. Một số thay đổi nhỏ từ thủ thuật gốc của Anhvo.
- Ban đầu mình test thử thủ thuật của Anhvo thì có 1 trục trặc nhỏ, là khi nhấp vào từ khóa để tìm kiếm trong bộ máy Google thì không hiển thị được kết quả, mình ko biết đây có phải là lỗi ko, nhưng như thế ko thể truy xuất được kết quả từ Google.

Hình ảnh minh họa:

- Và sau khi có 1 chút thay đổi nhỏ trong file JS thì mình được kết quả như bên dưới:

Nhấp vào ảnh để xem kích thước thật

Với việc chỉnh sửa này, Google chỉ liệt kê các kết quả từ việc tìm kiếm từ khóa trên blog của bạn.

Tác giả thủ thuật Anhvo

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

More about →

Chèn hẳn Form Liên hệ từ kontactr.com vào blog

[FD's BlOg] - Ở các bài viết trước mình đã từng đăng 1 bài hướng dẫn tạo form liên hệ từ trang web kontactr.com, còn ở bài viết này mình sẽ hướng dẫn các bạn đưa form contact này vào ngay trong blog luôn, không cần phải chuyển sang trang của nó.

Để chèn form này vào blog, bạn có thể chọn 2 cách:

+ Cách 1: tạo 1 bài viết mới, và dán code của form vào. Và xem bài viết này như 1 trang liên hệ trong blog của bạn.
+ Cách 2: tạo 1 widget HTML/Javascript và dán code của form vào.

- 1 lưu ý nhỏ: đối với cách 1, khi chèn code vào bài viết, ta phải chỉnh lại việc xuống hàng của code để cho form trông dễ nhìn hơn.

Đây là hình ảnh minh họa mình đưa thẳng nó vào trong bài viết

Trước tiên làm được form này bạn phải đăng kí 1 tài khoản ở kontactr.com , các bạn có thể tham khảo cách tạo form từ trang này ở đây.

Sau khi tạo xong, và đã kích hoạt mail, bạn vào trang chủ của nó để đăng nhập. Ở ngay trang vừa đăng nhập xong, bạn sẽ thấy hình như bên dưới:


Chú ý vùng khoanh tròn, đây chính là ID của tài khoản của bạn. Hay lưu nhớ ID này để thực hiện cho các bước sau.

Đối với các bạn đã có tài khoản rồi, thì cũng đăng nhập vào để xem mã số ID của mình.

Và sau đây là code của form liên hệ :

<div id="page">
<div id="content">
<div class="thebox">

<center><span >Contact fandung</span>
<form method="post" action="http://kontactr.com/user.php">
<input name="id" type="hidden" value="24234" />
<input name="referrer" type="hidden" value="" />
<table cellpadding="10px" border="0" >
<tr>
<td align="right">Your Name : </td>
<td align="left"><input name="sender_name" type="text" class="contactform" /></td>
</tr>
<tr>
<td align="right">Your Email : </td>
<td align="left"><input name="sender_email" type="text" class="contactform" /></td>
</tr>
<tr>
<td align="right">Subject : </td>
<td align="left"><input name="subject" type="text" class="contactform" /></td>
</tr>
<tr>
<td align="right" valign="top">Message : </td>
<td align="left"><textarea rows="10" cols="70" name="message" class="contactform"></textarea></td>
</tr>
<tr>
<td align="right" valign="middle">Image (case-sensitive): </td>
<td valign="middle" align="left">

<table cellpadding="5px" border="0" style=" ">
<tr>
<td valign="middle"><img src="http://kontactr.com/captcha.php" /></td>
<td valign="middle"><input type="text" name="captcha_code" size="5" maxlength="6" style="font-size: 15px; padding: 3px; font-family: Tahoma, Verdana; " /></td>
</tr>
</table>

</td>
</tr>
<tr>
<td colspan="2" align="center"><input name="send" type="submit" id="send" value="Send" class="contactform" style="font-size: 18px; width: 100px; letter-spacing: 5px;" /></td>
</tr>
</table>
</form>
</center>

</div>
</div>
</div>

- Có thể thay đổi code màu xanh theo ý bạn.
- Code màu đỏ chính là mã số ID tài khoản của bạn (đã xác định ở trên), hay thay đổi nó lại đúng theo như mã số ID tài khoản của bạn.
- width: 100px; : độ rộng của button "Send"
- rows="10" cols="70" : kích thước của vùng soạn thảo.

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

More about →

[ Yêu cầu ] : Trang trí cho widget Label và Blogroll

Theo yêu cầu của bạn Hiệp Cò (www.hiepco.com)

[FD's BlOg] - Yêu cầu này bạn hiệp cò đã nhờ mình lâu, vì 1 vài lý do mà bây giờ mình mới đáp ứng được cho bạn. Đây là một trong những thủ thuật cơ bản của blogger, dùng các đoạn code CSS để trang trí blog theo ý thích của riêng mình. Bài viết này mình sẽ giới thiệu mẫu cho bạn 2 widget (1 là widget có sẵn của blogger, 2 là widget tự tạo) để bạn tham khảo, rồi tự áp dụng cho các widget khác.

Hình ảnh minh họa

Trên 1 blog, các widget phải luôn được trang trí 1 cách đồng bộ với nhau, không nên tạo mỗi widget một kiểu. Vì thế trước khi đi vào trang trí cho các widget, ta sẽ tạo các class chung để sử dụng cho các widget này.

☼ Các bước chèn code CSS vào code template:
- Vào bố cục
- Vào chỉnh sửa code HTML
- chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

#widget-t {
padding:3px 5px 3px 5px;
border:1px solid #444;
background:#eee;
font-weight:bold;
font-size:120%;
text-align:center;
}
#widget-c {
padding:5px;
border:1px solid #444;
height: 200px;
overflow: auto;
}

Trong đoạn code trên, bạn có thể tùy chỉnh lại đoạn code màu đỏ, đó là chiều cao được thiết lập sẵn, nếu widget có nội dung dài hơn chiều cao này thì sẽ tự xuất hiện thanh trượt. (như hình minh họa phía trên)
- Save template.

Bây giờ ta bắt đầu đi vào trang trí

A. Trang trí cho widget có sẵn từ blogger: ở đây minh họa cụ thể là widget Label.
- Để chỉnh sửa các widget dạng này ta phải vào trong code template để chỉnh sửa trực tiếp.
- Đầu tiên hãy tìm đến đoạn code của widget Label.
+ vào bố cục
+ vào chỉnh sửa code HMTL
+ chọn mở rộng mẫu tiện ích
+ tìm đoạn code như bên dưới:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>

</div>
</b:includable>
</b:widget>

+ Và sửa nó lại như đoạn code bên dưới:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>
<div id='widget-t'>
<data:title/>
</div>
</b:if>

<div id='widget-c'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

+ Save template.

B. Trang trí cho widget tự tạo: ở đây minh họa cụ thể là widget Blogroll.
- Đối với các widget dạng này, đa số được tạo từ tiện ích HTML/Javascript, vì thế ta sẽ trang trí trực tiếp nó trong tiện ích HTML/Javascript. Khác với các widget được cung cấp sẵn, ta không cần thiết phải vào code template để chỉnh sửa.
- Khi tạo 1 widget HTML/Javascript, bạn nên để trống phần tiêu để, vào tiêu đề của nó ta sẽ tạo ngay trong phần code của thủ thuật.

Hình minh họa:

Và phần nội dung bên trong của nó sau khi trang trí sẽ có dạng như sau:

<div id="widget-t">Blogroll</div>

<div id="widget-c">
{CODE CỦA THỦ THUẬT - NỘI DUNG CỦA WIDGET}
</div>

- Blogroll : chính là tiêu đề của widget
- Thay đoạn code màu xanh thành code của thủ thuật.

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

More about →

Tạo tab có hiệu ứng trượt khi rê chuột vào button

[FD's BlOg] - Như các bạn đã biết, khi dữ liệu của 1 tab quá dài, mà bạn không muốn nó chiếm nhiều không gian trong blog thì ta tạo cho nó thanh trượt. Sẽ có bạn ko không thích thanh trượt này, và ngay cả mình, mình cũng không thích thú cho lắm khi thấy nó hiển thị ở trong tab. Và bài viết này sẽ hướng dẫn các bạn 1 thủ thuật tạo hiệu ứng trượt nội dung khi rê chuột vào button, tab sẽ trượt như kiểu ta nhấn vào button lên hoặc xuống ở thanh trượt thông thường.

Xem demo ở đây: http://fandung.110mb.com/JS-files/easy-scroller/index.html

Hình minh họa :

Khi bạn rê chuột vào button Up thì nội dung bên trong sẽ trượt xuống, khi bạn rê vào button Down thì nội dung sẽ trượt lên, còn khi nhấn vào button Reset thì nội dung sẽ trở về vị trí ban đầu.

Bài viết này mình sẽ chỉ giới thiệu thủ thuật, còn việc áp dụng cho các widget thì các bạn có thể tự theo hướng dẫn của bài này mà thực hiện. Sau này rảnh mình sẽ áp dụng nó cho các widget và viết bài hướng dẫn sau.

☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type="text/javascript" src="http://fandung.110mb.com/JS-files/easy-scroller/easyscroll.js"></script>

<script type="text/javascript">
var speed = 5;
var height = 250;
</script>


<style type="text/css">
#easyscroll{
background:#eee;
margin:1em 0;
/* add additional styling */
}

/* easyscroll navigation buttons */

#easyscrollnav, #easyscrollnav li{
height:28px;
line-height:28px;
margin:0;
padding:0;
}
#easyscrollnav{
margin:1em 0;
}
#easyscrollnav li{
list-style:none;
float:left;
background:#eee;
margin-right:10px;
padding:0 10px;
color:#333;
cursor:pointer;
}
#easyscrollnav li.over{
color:#999;
text-decoration:underline;
background:#ccc;
}
</style>

- Vài chú thích nhỏ :

+ var speed = 5; : tốc độ trượt nội dung
+ var height = 250; : chiều cao của tab.

5. Và đây là code HTML của thủ thuật :

<div id="myContent">
{NỘI DUNG CỦA TAB}
</div>

Khi muốn áp dụng cho 1 widget hoặc 1 tiện ích nào, bạn chỉ cần thay đoạn code màu xanh thành nội dung của widget đó là xong. Nếu không thực hiện được, hoặc không biết cách thực hiện, có thể vào mục yêu cầu thủ thuật của blog mình để yêu cầu mình giúp, mình sẽ hướng dẫn cho các bạn.
Hạn chế của thủ thuật là chỉ chạy được 1 tab trên 1 trang mà thôi.

Cập nhật 1 số chỉnh sửa nhỏ (22/6/2009)
Chúc các bạn thành công.

More about →

Hướng dẫn giữ các widget khi thay template mới cho blog

[FD's BlOg] - Việc thay template cho blog thì không có gì khó, đối với các template có sẵn của blogger thì việc này lại càng dễ hơn, chỉ vài cái nhấp chuột là ta có thể thay template mà không sợ mất các widget. Tuy nhiên đối với các template ngoài bộ template của blogger cung cấp thì việc thay template có hơi chút phức tạp hơn. Bài viết này mình sẽ hướng dẫn một cách cụ thể cách thay template mới cho blog mà vẫn giữ được các widget.

☼ Sau đây là các bước để thực hiện:

A. Bước 1:
Để thực hiện việc thay template,trước hết các bạn phải xác định rõ các widget có trong blog của mình, và dữ liệu của các widget đó ra sao. Ở đây ta có thể chia các widget ra thành 2 nhóm :
- Nhóm 1: gồm các widget có sẵn được cung cấp bởi blogger.
- Nhóm 2: gồm các tiện ích được tạo từ widget HTML/Javascript. Ở nhóm 2 này việc sao lưu widget sẽ có chút phức tạp hơn nhóm 1. Do data của các widget này gồm nhiều thành phần như : code HTML, code CSS, code Javascript... Nếu các code này đều nằm chung trong widget HTML/javascript thì ta không cần phải lo, tuy nhiên nếu code CSS và code Javascript này nằm trong code template thì bạn phải chịu khó lục lọi trong code template để save lưu nó lại trước khi thay template. Bởi nếu thiếu các code này thì các widget sẽ không chạy hoặc không hiển thị tốt.

Sau khi lọc được tất cả các code CSS và javascript có liên quan tới các widget thì các bạn hãy tạo 1 file text (Notepad) và lưu nó vào trong file đó. Để cho tiện, hãy dặt toàn bộ code CSS có liên quan vào trong thẻ :

<style type="text/css">
{... code CSS ...}
</style>

rồi sau khi thay template ta chỉ cần copy code CSS và javascript vào trước thẻ </head> là được.

B. Bước 2: Tập trung các widget lại một khu vực, thường ta sẽ chọn ở sidebar.
- Do sở thích và cũng như việc bố trí của mỗi người khác nhau nên các widget sẽ được đặt ở các vị trí khác nhau trên blog như : header, main, footer, sidebar...

Xem hình minh họa:

- Các widget nằm ở các vị trí như vậy sẽ rất cực cho chúng ta save lưu khi thay template. Tốt nhất ta sẽ di chuyển chúng vào trong sidebar hết, như thế khi sao lưu dữ liệu của các widget ta chỉ cần tập trung trong section sidebar mà thôi.

xem hình minh họa:

Sau khi thay đổi vị trí của các widget nhớ lưu bố cục lại nhé.

C. Bước 3: Sao lưu dữ liệu của các widget.
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Copy lại toàn bộ code nằm trong section sidebar như bên dưới:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
{COPY TOÀN BỘ CODE NẰM Ở ĐÂY}
...
...
</b:section>
</div>

- Điểm quan trọng của bước này là bạn phải biết chính xác thẻ <div id='sidebar-wrapper'> đóng ở vị trí nào, như thế mới không bỏ sót các widget. Thông thường nếu sidebar nằm bên trái, thì thẻ đóng </div> của nó sẽ nằm trước thẻ <div id='main-wrapper'> , đối với sidebar bên phải thì thẻ đóng </div> của nó sẽ nằm trước thẻ <div id='footer'>.
- Sau khi xác định được tất cả code màu xanh đó, ta copy toàn bộ nó và lưu vào 1 file Notepad.

D. Bước 4 : Thay template cho blog
- Sau khi đã chọn cho mình 1 template ưng ý, download nó về rồi up lên blog của bạn. Khi nhấn vào button "Tải lên" thì sẽ hiện 1 thông báo nhỏ như bên dưới:


- Tới đây, khoan nhấn nút "Xác Nhận & Lưu", xuống phía dưới code template, tìm đoạn code bên dưới:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
{COPY CỦA TEMPLATE MỚI}
...
...
</b:section>
</div>

- Thay thế toàn bộ đoạn code màu xanh bằng đoạn code mà bạn đã sao lưu vào file Notepad ở bước 3.
- Tiếp tục chèn đoạn code CSS và javascript mà bạn đã sao lưu ở bước 1 vào trước thẻ đóng </head>.
- Sau khi hoàn tất thì hãy save template lại.

Và cho tới bước này, mở blog nên ta sẽ có kết quả như bên dưới:

Trước khi thay template:

Sau khi thay template:

E. Bước 5 : Thay đổi lại bố cục blog cho tương ứng với bố cục cũ
- Bước này là bước cuối cùng, bạn hãy sắp xếp lại cái widget vào các vị trí tương ứng với bố cục bạn đầu khi chưa thay template. Chỉ với thao tác kéo thả các widget là ta có thể hoàn thành bước này.

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

More about →

Tạo buttom nhảy lên, xuống hoặc vào giữa trang với lệnh javascript:scroll

Cập nhật ngày 20/06/2009

[FD's BlOg] - Để tiện cho việc người khác lướt blog(web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang , hoặc nhảy vào giữa trang. Bài viết này mình sẽ hướng dẫn các bạn thực hiển nó.

Để cho sinh động, ta nên tạo nút bằng hình ảnh.
Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.

Các bước thực hiện: (ở đây mình giới thiệu cho blogspot)
1. Đăng nhập vào blog
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code CSS bên dưới vào trước đọan code ]]></b:skin>

#top-buttom_image {
position:fixed;
_position:absolute;
bottom:5px;
right:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

- bottom:5px; , right:5px; : 2 đoạn code này để xác định vị trí hiển thị của các button trên màn hình.
4. Chèn đọan code sau vào trước thẻ đóng </body>

<div id='top-buttom_image'>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='{Link ảnh}'/></a><br/>
<a href='javascript:scroll(0,9999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh}'/></a>
</div>

- Thay code {Link ảnh} thành địa chỉ URL của ảnh mà bạn muốn hiển thị.

Chú ý: trong lệnh javascript:scroll(0,9999999) số 9999999 đặt càng lớn càn tốt, nếu đặt nhỏ quá, đối với những trang dài, nó sẽ không nhảy đến cuối trang được.

Update (20/06/2009) - button nhảy vào giữa trang

- Ngoài việc cập nhật button nhảy vào giữa trang, mình còn giới thiệu cho các bạn 1 phương thức khác giúp nhảy xuống trang 1 cách chính xác hơn.
- Các bước thực hiện hoàn toàn tương tự như trên, chỉ thay đổi code ở bước 4 thành đoạn code bên dưới:

<script type='text/javascript'>
var maxWidth = (document.body.clientWidth);
var maxHeight = (document.body.clientHeight);
</script>

<div id='top-buttom_image'>
<a href='javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='{Link ảnh1}'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa trang'><img alt='Vào giữa trang' border='2' src='{link ảnh2}'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh3}'/></a>
</div>

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

More about →