Bài 9 Tạo bài viết liên quan

[blog]
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.

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/AVvXsEhUW1TTsVt9TL0M05k4LZW-8JKKi92Ass-7ieqLHicctUoOLFYkEYzBJgu3-WaO7zYYjEAlqP9JITN4tYe-ppqIzjKc_-nbomvNSeolZLP36Q4B-Wh6OaZNFF5GmfNqPoodu_hJTKaPWOCL/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ả.
[/blog]