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é
