Tạo Hiệu Ứng Loading Đẹp Mắt Cho Blogger

Thỉnh Thoảng Bạn Thường Thấy Ở Một Số Website Hoặc Blogger Khi Các Nội Dung Chưa Được Hoàn Thiện Thì Sẽ Có Một Số Lệnh Như: Loading, Đang Tải Dữ Liệu,... ! Đó Là Để Biết Trạng Thái Của Trang Khi Người Dùng Trình Duyệt Vào Website Hoặc Blogger Đó !

Hôm Nay Mình Xin Chia Sẻ Cách Để Ứng Dụng Công Cụ Loading Như Đã Miêu Tả Ở Phần Trên Cho Blogger. Công Cụ Này Cũng Khá Tiện Ích, Khi Trang Đã Loading Xong Thì Trạng Thái Này Sẽ Tự Động Mất Đi, Nên Sẽ Không Ảnh Hưởng Gì Tới Blogger Của Bạn Cả. Bạn Có Thể Xem DEMO Ngay Trên Blogger Của Tôi.

                                                                                Hình Ảnh Minh Họa:

☼ Tiến hành thủ thuật như sau:

B1. Đăng nhập Blogger

B2. Vào phần Thiết kế (hay bố cục)

B3. Thêm tiện ích HTML/Javacript rồi dán đoạn code phía 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">Welcome to Blog Kul Nguyễn Bình</p><p align="center" style="font-

family:Verdana;color:#295dc6;font-size:15pt;font-weight:bold"> Cảm ơn bạn đã ghé thăm Blog Kul Nguyễn Bình!</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 tải dữ liêu … Đợi chút xíu nhé!</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 bạn 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>

*Lưu Ý: Hãy Thay Đổi Các Dòng Lệnh Được Đánh Bằng Màu Đen Để Phù Hợp Với Blogger Của Bạn Nhé !

> Chúc Các Bạn Thành Công

B4: Cuối Cùng Bạn Nhấn Save Là Xong!