Hướng dẫn code bài viết liên quan cho blogspot

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.

Hướng dẫn code bài viết liên quan cho blogspot

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ước 2: Các bạn thêm code Ajax get dữ liệu trước thẻ </body>


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

Bước 3: Thêm HTML, các bạn vô chỉnh sửa giao diện blog rồi tìm thẻ <div class='post-footer'>

Rồi thêm sửa như này


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

Như vậy là bạn đã code xong phần tạo bài viết liên quan cho blogspot chó thumb và ngày tháng kèm theo.

Với bài Hướng dẫn code bài viết liên quan cho blogspot hy vọng sẽ giúp ích được cho bạn trong quá trình thiết kế blogspot.
Tags:

Nhận xét

Đăng nhận xét

Mẫu tiếp thị liên kết

Xem thêm

×