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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghX9W93DQJlnyyRUTGrbfJNZ92JOS37QPNNHPABZI4XJkYx_ArBwL1yNxVkD6Pj1qs8X5LC1MQFlHUeN3gtIRDFxa7sylKi9XylrNuXYgXj6TNt-kjAy0e19Fyf6rwXPRYUl1Gkpf4EmN_/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
Với hình ảnh đường dẫn bên ngoài thì mục hiển thị ảnh không hoạt động.Ad có thể thêm mã hiển thị thum nếu không có thì kiểm tra xem trong bài viết lấy hình ảnh đầu tiên làm thumb được ko
Trả lời XóaCode trên đã có sẵn, ảnh đầu tiên, link ngoài, youtube...
Trả lời Xóaảnh ngoài không hiển thị nhé admin
Xóa