Tạo trang loading đơn giản cho blog

[ Ji Nguyễn ]  Lâu lâu vọc tí cho vui, hôm nay Pana sẽ hướng dẫn các bạn cách tạo một trang loading đơn giản và khá đẹp mắt.

Thực hiện:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Click chọn Thêm tiện ích, sau đó chọn HTML/ Javascript
4. Chèn đọan code bên dưới vào.

<script>
var bar=0
var line="||"
var amount="||"
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",125);}
else
{loaibo()}
}

</script>

<div id="TGTH_Loading" align="center" style="position:fixed;visibility:hidden;-moz-opacity: 0.80px;background: #000000;filter: alpha(opacity=80);height: 100%;left: 0%;top: 0%;opacity: 0.80;width: 100%;z-index: 1001;">
<form name="loading">
   <table align="center" style="position:fixed;top:11%; left: 0px;" height="90%" width="100%"><tbody><tr><td valign="center"><p align="center" style="font-family:Verdana;color:red;font-size:20pt;font-weight:bold">Text 1</p><p align="center" style="font-family:Verdana;color:#295dc6;font-size:15pt;font-weight:bold">Text 2</p><p align="center" style="font-family:Verdanal;font-size:8pt"><input style="border: medium none ; color: white; background-color:black; text-align: center;" size="47" name="percent"><br><input style="border-style: none; padding: 0px; font-weight: bolder; color:white ; font-family: Arial; background-color: rgb(53, 53, 53);" size="45" name="chart"><br><script>count()</script><b><font style="font-size: 8pt;" color="#ff6600" face="Verdana">Đang load trang blog, xin đợi ....</font></b></p><br><p align="center"style="font-family:Verdana;font-weight:bold"><a href="Javascript:loaibo()()"  style="color:yellow;font-size:10pt">Nhấn vào đây nếu không muốn đợi lâu.</a></p>
            </td></tr></tbody></table></form>
</div>

<script type="text/javascript">
var once_per_session=1

function loaibo(){
document.getElementById('TGTH_Loading').style.visibility="hidden"
document.cookie="TGTH_Loading=yes"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function Dongloading(){
if (get_cookie('TGTH_Loading')=='')
{
Moloading()
}
}
function Moloading(){
document.getElementById('TGTH_Loading').style.visibility="inherit"
}

if (once_per_session==0)
Moloading()
else
Dongloading()
</script>

Bạn nhớ chỉnh sửa lại những đoạn tô màu đỏ cho phù hợp với trang của mình nhé.

5. Lưu lại.


Bây giờ bạn chỉ cần xem blog là sẽ thấy ngay kết quả. Chúc các bạn thành công