Bạn lướt web thỉnh thoảng bạn sẽ thấy ở một số website khi các nội dung trên trang đó chưa được tải hết thì sẽ có một thông báo như: Loading, đang tải dữ liệu... Đó là để cho biết trạng thái của trang khi người dùng trình duyệt vào website đó. Hôm nay mình xin chia sẽ cách để ứng dụng công cụ load trang như mô tả ở trên cho blogspot. Công cụ này cũng khá tiện ích, khi trang của bạn đã load xong thì trạng thái này sẽ tự động mất đi, điều này nó sẽ không ảnh hưởng đến blog của bạn. Bạn có thể xem demo bên dưới.
 |
| Ảnh minh họa sau khi làm thủ thuật |
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code sau trên thẻ <body>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div border="0" style="position:fixed; width: 1350px; height: 100px; z-index: 100; bottom: 0px; left: 0;" id="loading" align="center"> <table border="1" width="1000" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#ffffff"> <tr> <td align="center"> <div border="1" style="background:#06fa06 url() no-repeat scroll top center; filter: alpha(opacity=170); opacity: 2.7; width: 1350px; height: 100px; z-index: 1; border-collapse: collapse;" bordercolor="#00ff33" align="center" > <b> <script>document.write(greeting + timeText + "-" + dateText + "");</script> <br/><br/> <script language="JavaScript1.2"> var message="Chào mừng các bạn đã ghé tham quan Website Lớp Cao Đẳng Quản Trị Kinh Doanh 5A - Trường Đại Học Tây Đô - Mọi chi tiết xin gửi về địa chỉ: cdqtkd5a@gmail.com" var neonbasecolor="#110099" var neontextcolor="#ff0000" var flashspeed=40 //in milliseconds var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>')} else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj} function neon(){ if (n==0){ for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return}} function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed)} beginneon() </script> <br/>Đang tải trang http://cdqtkd5a.blogspot.com/, Các bạn thông cảm vui lòng chờ trong giây lát nha. Thanks </b><br><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFym6ClbIEHzKBlxq845l-RFmXGv1Xn2vLDlS9R50pel4QNxhSQSXF1nhemCGm48NTzZ8YpaO_kz0rcEk7jNyHaVI018T0NmrELssHrjTSYbu3LxUPhHxxyTT9z-n3kVH69uDiPknIf4/s1600/645906hmoluktu9a.gif"> <center/> </b:if> </div> </td> </tr> </table> </div>
5. Chèn tiếp đoạn code bên dưới vào trên thẻ </body>
<script>window.document.getElementById("loading").style.display = 'none';</script>
Chỉnh các thông số:
with là độ rộng khung chứa thông điệp, hiegh là chiều cao khung chúa thông điệp, màu xanh thay thành hình ảnh Loading, #06fa06 màu nền chứa thông điệp, màu hồng thay thành thông điệp của bạn.
Ngoài ra, bạn muốn hiển thị Lịch chào gồm ( chào buổi sáng, chào buổi chiều, chào buổi trưa, chào buổi tối , thời gian và ngày- tháng- năm) thì bạn chỉ cần thêm đoạn code sau trên thẻ </head>
<script type='text/javascript'> //<![CDATA[ d = new Date() dateText = "" dayValue = d.getDay() if(dayValue == 0) dateText += "Chủ Nhật" else if (dayValue == 1) dateText += "Thứ Hai" else if (dayValue == 2) dateText += "Thứ Ba" else if (dayValue == 3) dateText += "Thứ Tư" else if (dayValue == 4) dateText += "Thứ Năm" else if (dayValue == 5) dateText += "Thứ Sáu" else if (dayValue == 6) dateText += "Thứ Bảy" dateText += ", Ngày " + d.getDate() monthValue = d.getMonth() dateText += " " if (monthValue == 0) dateText += "Tháng 1" if (monthValue == 1) dateText += "Tháng 2" if (monthValue == 2) dateText += "Tháng 3" if (monthValue == 3) dateText += "Tháng 4" if (monthValue == 4) dateText += "Tháng 5" if (monthValue == 5) dateText += "Tháng 6" if (monthValue == 6) dateText += "Tháng 7" if (monthValue == 7) dateText += "Tháng 8" if (monthValue == 8) dateText += "Tháng 9" if (monthValue == 9) dateText += "Tháng 10" if (monthValue == 10) dateText += "Tháng 11" if (monthValue == 11) dateText += "Tháng 12" if (d.getYear() < 2000) dateText += " Năm " + (1900 + d.getYear()) else dateText += " Năm " + (d.getYear()) minuteValue = d.getMinutes() if (minuteValue < 10) minuteValue = "0" + minuteValue hourValue = d.getHours() if (hourValue < 12){ greeting = "Chào buổi sáng ! " timeText = + hourValue + ":" + minuteValue + " AM "} else if (hourValue == 12) {greeting = "Chào buổi trưa ! " timeText = + hourValue + ":" + minuteValue + " PM "} else if (hourValue < 14) {greeting = "Chào buổi trưa ! " timeText = + (hourValue - 12) + ":" + minuteValue + " PM "} else if (hourValue < 18) {greeting = "Chào buổi chiều ! " timeText = + (hourValue - 12) + ":" + minuteValue + " PM "} else {greeting = "Chào buổi tối ! " timeText = + (hourValue - 12) + ":" + minuteValue + " PM "} document.write('') //]]> </script>
Kế tiếp bạn tìm đến đoạn code sau:
<br/><br/> <script language="JavaScript1.2">
và đặt trên nó đoạn code dưới đây:
<script>document.write(greeting + timeText + "-" + dateText + "");</script>
Cuối cùng bấm lưu lại là xong.
Bạn xem Demo bên dưới
 |
| Ảnh minh họa |
Nguồn:CĐQTKD5A
Tin Tức
0 nhận xét:
Đăng nhận xét
» CĐQTKD5A cảm ơn bạn đã giành chút time để đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người thân, bạn bè biết.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu.
» Những lời comment thiện ý của bạn sẽ giúp trang CDQTKD5A ngày một phát triển!