Nếu mấy hôm nay các bạn truy cập vào trang youtube sẽ thấy trang đó có một hiệu ứng loadding cực lạ đó là thanh loading chạy ngang ngay trên đầu của trang đó. Bài viết này mình sẽ hướng dẫn các bạn thêm hiệu ứng loadding đó vào blog của các bạn.
Các bạn chỉ cần làm theo một số bước đơn giản bên dưới.
» Thêm hiệu ứng loadding chỵ ngang giống trang youtube cho blogspot.
1- Đăng nhập vào Blog => chọn mẫu » Chọn chỉnh sửa HTML2- Dán đoạn code bên dưới vào trước thẻ đóng </head> trong blog của bạn.
<style> #namkna-loading{ position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWSHLVmtnzfbJu9JlnUSekCnnnDDvPLzuSYDvQQvEfGZJMNyZPqvPgLAIq8BqTsIeto79xJAwXP2ASpd_tXwQufPpB-u5l2l5fTko9qmrjFjK_GMPvbDL-ujYMzOLctz-n5rAvrkahzfSG/s1600/Loadding-author-namkna.gif) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px; } .NAMKNA#namkna-loading{ display: none; } @media only screen and (device-width: 768px) { #loading { position:absolute; width:1040px; min-height:768px; } } #namkna-progress-bar{ position: absolute; top: 0; left: 0; background: #de1301; opacity: 0.8; width: 0; height: 18px; } #namkna-loader{ height: 100%; display: none; } </style> <script> (function($){ $("html").removeClass("NAMKNA"); $("#header").ready(function(){ $("#namkna-progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#namkna-progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#namkna-progress-bar").stop().animate({ width: "100%" },600,function(){ $("#namkna-loading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); </script>3- Thêm vào sau thẻ </body> đoạn code bên dưới:
<div id='namkna-loading'><div id='namkna-progress-bar'></div><div id='namkna-loader'>Loading...</div></div>- Công việc tiếp theo của bạn là lưu mẫu lại và xem thành quả của bạn nha,
Nhận xét
bóc tem quả này....:D
Trả lờiXóađoạn code đầu tiên dán vào trước thẻ đóng(/head) phải không anh?
Trả lờiXóađoạn đầu tiên dán vô chỗ mô nhể???
Trả lờiXóaCái này chắc do bác Admin cộng tác viên viết thiếu thôi, đê mình test thử rồi thêm vào bài viết dóa cho,
XóaCho em hỏi câu hơi ngoài lề tí. Em mới lập blogspot và muốn đặt pass một phần nội dung bài viết. Em có search google nhưng chỉ ra cách đặt pass của cả bài viết thôi. Anh có thể hướng dẫn em được không?
Trả lờiXóaOke bài tới anh sẽ hướng dẫn em thủ thuật này nha,
XóaThủ thuật này chắc sẽ giúp được bạn
XóaE đã thêm liên kết vào trang e rồi a kiểm tra rồi add em với nhé
Trả lờiXóaurl: http://giangle.org
title: phần mềm miễn phí
img http://giangle.org/wp-content/uploads/2013/09/favicon1.ico
Namkna ơi! Mình có gửi mail cho bạn qua phần liên hệ http://namkna.blogspot.com/p/lien-he.html. Rất mong nhận hồi âm sớm từ bạn :)
Trả lờiXóaMây hôm nay mình bận quá giờ mới thấy commet của bạn, Lát mình sẽ kiểm tra mail nha,
Xóabạn có kiểm tra email chưa. Mong bạn hồi âm sớm ^^
Xóaanh Nam cho em hỏi làm sao để nó vẫn hiển thị bài viết trong khi loading anh nhỉ,và chỉ có một lằn chạy ngang phía trên giống y như youtube ấy? ak mak làm sao để cái lằm ấy nhỏ lại anh Nam nhỉ?
Trả lờiXóaChỉnh lại % của 2 đoạn sau nha:
Trả lờiXóa$("#header").ready(function(){ $("#namkna-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#namkna-progress-bar").stop().animate({ width: "75%" },1500) });
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaanh Nam dùm em có phải blog của em nó load rất chậm phải hk anh?
Trả lờiXóahttp://tienganhgioi123.blogspot.com/
có phải blog của em không được chuẩn lắm không anh, sao load nó chậm quá ak...:D
Trả lờiXóaCó nhiều nguyên nhân em ak, Nhưng nguyên nhân chính anh thấy đó là số file Js trong vblog của em khá nhiều, trong khi em không Upload lên host rieng của bản thân do vậy khi có nhều người dùng chug các file đó thì nó sẽ chạm đi tương đối.
XóaThêm nữa em nên hạn chế dùng các file flash nếu nó không thực sự cần thiết nha,
Chào anh Namkna! Em là admin của trang bingboong.info (Tên trên box liên kết của anh là 2B Radio Blog).
Trả lờiXóaMấy hôm trước em sử dụng nick kia để gửi email và comment cho anh để thông báo cho anh biết em thay đổi URL blog và cả tựa đề, mô tả. Nhưng hình như anh nghi ngờ nick đó giả mạo nên không thấy hồi âm gì hết trơn á :))
Em đã xây dựng lại blog với domain mới do domain kia không phù hợp vs chủ đề mới của blog mới. Em nhờ anh sửa đổi link liên kết, mô tả, tên blog giùm em nha ^^
URL: http://yeutruyenngan.com/
Tên blog: Yêu Truyện Ngắn
Mô tả: Truyện ngắn hay-Trà Sữa Radio
Mong nhận hồi âm sớm từ anh :D
Anh đã đổi rồi em có thể kiểm tra lại nha, Mấy hôm nay anh đang đi công tác nên ít vào mail lắm em thông cảm nha :)
XóaVâng. em đã thấy anh đổi rồi. Cám ơn anh nhiều nha ^^
XóaP/S: blog anh ngày càng hút khách, số lượng visit mỗi lần em vô blog anh lúc cao điểm là gần 200 người đang online. Sao anh không tiếp tục treo baner quảng cáo hoặc popup kiếm tiền "uống cafe" vậy anh :D
UK nhưng đặt nhiều khi làm độc giả không thoải mái. Với lại giờ cũng ít người có nhu vầu đó mà :)
Xóagiống y chang youtube nè http://github.hubspot.com/pace/docs/welcome/
Trả lờiXóa