[blog]
Tiếp theo mình hướng dẫn cách tạo bài viết liên quan, code Ajax, kết hợp icon loading trong lúc chờ tải.
Bước 1 thêm CSS trong <b:skin>
Bước 2: Thêm Ajax trước </body>
Bước 3 Các bạn nhấn CTRL F tìm <div class='post-footer'> nó chỉ có một vị trí duy nhất
Các bạn sửa lại như HTML dưới
Lưu lại và kiểm tra kết quả.
[/blog]
Tiếp theo mình hướng dẫn cách tạo bài viết liên quan, code Ajax, kết hợp icon loading trong lúc chờ tải.
Bước 1 thêm CSS trong <b:skin>
/* Relate Post Css */ #related-wrap{overflow:hidden;float:left;width:100%;background-color:#ffffff;box-sizing:border-box;padding:20px;margin:30px 0 0;border:1px solid #e6e6e6} .nb-style #related-wrap{border:0} #related-wrap .related-tag{display:none} .related-content{float:left;width:100%} .related-content .loader{height:200px} .related-posts{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;padding:0;margin:0 -10px} .related-posts .related-item{position:relative;float:left;width:calc(100% / 3);box-sizing:border-box;padding:0 10px;margin:20px 0 0} .related-posts .related-item.item-0,.related-posts .related-item.item-1,.related-posts .related-item.item-2{margin:0} .related-posts .entry-image{position:relative} .related-posts .entry-image-link{width:100%;height:140px;position:relative;display:block;overflow:hidden} .related-posts .entry-title{font-size:14px;font-weight:700;line-height:1.4em;margin:8px 0 0} .related-posts .entry-meta{margin:3px 0 0;font-size:11px;color:#aaaaaa;font-weight:400;overflow:hidden;padding:0 1px} .related-posts .entry-thumb{display:block;position:relative;width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;z-index:1;transition:opacity .35s ease,transform .3s ease} #related-wrap .title-wrap{position:relative;float:left;width:100%;line-height:1;padding:0 0 15px;margin:0 0 20px;border-bottom:2px solid #ebebeb} #related-wrap .title-wrap:after{content:'';position:absolute;left:0;bottom:0;width:40px;height:2px;background-color:#ff3d00;margin:0 0 -2px} #related-wrap .title-wrap > h3{float:left;font-size:16px;color:#171c24;font-weight:700;margin:0} #related-wrap .title-wrap > a.more{float:right;font-size:12px;color:#aaaaaa;line-height:16px;padding:0} @media screen and (max-width:680px){.related-posts .related-item.item-0{margin:0!important}.related-posts .related-item{width:100%;padding:0 10px;margin:20px 0 0!important}}
Bước 2: Thêm Ajax trước </body>
<b:if cond='data:view.isPost'> <script> //<![CDATA[ var id_label = $('.related-posts').attr("data-id"), numPost = 3, nothumb = "https://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/w222-h140-p-k-no-nu/safe_image.png"; function relatedpost(e) { for (var i = 0; i < e.feed.entry.length; i++) { for (var t = e.feed.entry[i], a = 0; a < t.link.length; a++) if ("alternate" == t.link[a].rel) { var link = t.link[a].href; break } var title = t.title.$t; if ("media$thumbnail" in t) var thumb = t.media$thumbnail.url.replace("s72-c", "w222-h140-p-k-no-nu"); else { var o = t.content.$t, u = o.indexOf("<img"), v = o.indexOf('src="', u), f = o.indexOf('"', v + 5), h = o.substr(v + 5, f - v - 5); thumb = -1 != u && -1 != v && -1 != f && "" != h ? h : nothumb } var count = i; var ngay = e.feed.entry[i].published.$t.substring(8, 10), thang = e.feed.entry[i].published.$t.substring(5, 7), nam = e.feed.entry[i].published.$t.substring(0, 4), date_string = ngay + "/" + thang + "/" + nam; var item = '<article class="related-item post item-' + count + '"> <div class="entry-image"><a class="entry-image-link" href="' + link + '"> <span class="entry-thumb" style="background-image:url(' + thumb + ')"></span></a></div> <div class="entry-header"> <h2 class="entry-title"><a href="' + link + '">' + title + '</a></h2> <div class="entry-meta"><span class="entry-time"><time class="published" datetime="' + date_string + '">' + date_string + '</time></span></div> </div> </article>'; $(".related-posts").append(item) } } $.ajax({ url: "/feeds/posts/default/-/" + id_label, type: "get", data: { alt: "json", "max-results": numPost }, dataType: "jsonp", jsonpCallback: "relatedpost", beforeSend: function() { $('.related-posts').addClass('loader'); }, success: function() { $('.related-posts').removeClass('loader'); } }); //]]> </script> </b:if>
Bước 3 Các bạn nhấn CTRL F tìm <div class='post-footer'> nó chỉ có một vị trí duy nhất
Các bạn sửa lại như HTML dưới
<div class='post-footer'> <b:include name='footerBylines' /> <div id="related-wrap"> <div class="title-wrap related-title"> <h3>Có thể bạn thích</h3> <a class="more" expr:href="data:post.labels.last.url">Xem thêm</a> </div> <div class="related-content"> <div class="related-posts" expr:data-id="data:post.labels.last.name"> </div> </div> </div> </div>
Lưu lại và kiểm tra kết quả.
[/blog]