Tạo hiệu ứng "loading..." cho trang web & blog

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Mô tả:

Hiệu ứng này sẽ hiện lên bảng "Loading..." khi trang web chưa tải về hết, khi đã tải xong trang web, bảng này tự động mất đi và nội dung trang web sẽ hiện lên.

Cài đặt:

Hiệu ứng này khá đơn giản, chỉ cần vài dòng code là bạn có thể dùng được. Bạn có thể dùng hiệu ứng này cho trang web, blog, uCoz website, wordpress...

Đầu tiên bạn chèn đoạn code sau dưới thẻ <body>

<script type='text/javascript'> 
		window.onload = detectarCarga; 
		function detectarCarga() { 
		document.getElementById("imgLOAD").style.display="none"; 
		document.getElementById("WholePage").style.display=""; 
		} 
		</script> 
		<div id="imgLOAD" style="position:fixed;top:200px;right:500px;border:1px solid gray;padding:10px; background: #e3e2df" align="center"> 
		loading, please wait ...<br/> 
		<img src="link ảnh" border=0></div> 
		<DIV id="WholePage" style="display:none">

- Các thông số sau bạn có thể điều chỉnh theo ý thích của mình:

+ top:200px;right:500px : Hãy điều chỉnh 2 thông số này để ảnh có vị trí thích hợp trên blog của bạn.

+ link ảnh : link ảnh động, ta nên chọn các hình động có nền trong suốt.

Sau đây là vài ảnh động "Loading..." cho bạn lựa chọn:

+ position:fixed; : lệnh này dùng để cố định vị trí của ảnh trên màn hình(di chuyển theo khi rê chuột lên hoặc xuống), nếu muốn ảnh nằm ở một vị trí nào đó trên blog của bạn (tức là không di chuyển theo chuột) thì bạn đổi lại thành lệnh :position:absolute;

Kế tiếp chèn thêm đoạn này trước thẻ </body>

</DIV>

Vậy là xong, bạn trở lại trang web, nhấn F5 để xem hiệu ứng.

Chúc bạn thành công !