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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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ướ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://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>

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.

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.

Tags: Blog