Tạo bài viết liên quan cho blogspot có ảnh đại diện
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
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.
|
Tạo bài viết liên quan cho blogspot có ảnh đại diện |
Hướng dẫn thực hiện
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUY_zq-y7PYr4nuMve40xzDp7bTUQIbL0vcmi-mMDq-rO-el_KP_1fnHmfRtYg41YL3AXi66_vJUf_oLkYA0PO5THOw-pmSWYLE-i9J3yY4Z9pfDhNSYjgHn8SGOcFD5Wr4a4mfEOaLl27/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ả.
Truy cập Bypass Google Account APK để tải file APK nhé
Tham gia cuộc trò chuyện