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>
Bài viết: Hướng dẫn code bài viết liên quan cho blogspot được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét