Blog iTeam OS
Trang chủ
Blogspot Tips

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
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é