Bài trước mình Hướng dẫn code tiện ích bài viết theo label cho blogspot, bài viết hiển thị ở dạng list style number đẹp mắt và đơn giản.
Trong lúc chờ tải (loading)
Sau khi load xong
Tiếp theo bài này mình thêm hiệu ứng loading trong lúc chờ tải, khi nào load xong bài viết thì hiệu ứng loading ẩn đi.
Các bước cập nhật thêm CSS của bài trước như sau:
.ploading{position:relative;overflow:hidden;display:block;height:220px;margin:0}.ploading:after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-16px 0 0 -16px;border:2px solid #2874ef;border-top-color:#e1e8ed;border-right-color:#e1e8ed;border-radius:100%;animation:spinner 1s infinite linear;transform-origin:center}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
Tiếp theo đoạn code Jsonp Callback bác bạn cập nhật như sau:
<script>//<![CDATA[function getpost(e) {for (var t = 0; t < e.feed.entry.length; t++) {e.feed.entry[t];for (var n = 0; n < e.feed.entry[t].link.length; n++)if ("alternate" == e.feed.entry[t].link[n].rel) {var a = e.feed.entry[t].link[n].href;break} var l = e.feed.entry[t].title.$t,r = '<li><a href="' + a + '" title = "' + l + '">' + l.substring(0, 45) + "</a></li>";$(".numberlist ol").append(r)}}window.addEventListener("load", function() {$.ajax({url: "/feeds/posts/default/-/Blog",type: "get",data: {alt: "json","max-results": 5},dataType: "jsonp",jsonpCallback: "getpost",beforeSend: function() {$(".numberlist").addClass("ploading")},success: function() {$(".numberlist").removeClass("ploading")}})});//]]></script>
Tương tự như code cũ trước đó mình chỉ cần thêm đoạn này vô sau jsonpCallback: "getpost" và được cách nhau bởi dấu phẩy nha các bạn.
beforeSend: function() {$(".numberlist").addClass("ploading")},success: function() {$(".numberlist").removeClass("ploading")}
Xong các bạn lưu lại và kiểm tra kết quả khi xem blog. Như vậy là mình đã cập nhật thêm hiệu ứng Ajax loading cho blogspot đơn giản nhất.
Các bạn xem lại bài trước tại đây: Hướng dẫn code tiện ích bài viết theo label
Các bạn thấy hay thì ngại gì một comment tương tác cho vui nhỉ :)
Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).
Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.
Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.
Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback
Tags:
Blog
Nhận xét
Đăng nhận xét