Cách Làm Hiệu Ứng Loading Cho Blogger

Đánh Giá Bài Vi?t

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.

☼ 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 My Name is Hoàng Mạnh Tuấn</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 Của Tôi!</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>

DEMO :