Hướng dẫn code bài viết liên quan cho blogspot bằng ajax để lấy dữ liệu bài viết theo label liên quan khi xem chi tiết bài viết của blog.
Các bạn có thể xem demo ngay trên blog này của mình ở phần bài viết liên quan.
Các bước thực hiện để code bài viết liên quan cho blogspot mình sẽ hướng dẫn chi tiết như sau:
Bước 1: Các bạn thêm CSS sau
#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}}
.loader{position:relative;overflow:hidden;display:block;height:50px;margin:0}
.loader:after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-16px 0 0 -16px;border:2px solid #fc5356;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)}}
<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>
<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>
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
Nhận xét
Đăng nhận xét