Cách thêm các bài viết liên quan tự động ngay dưới dấu ngắt nhảy

Chèn các bài viết liên quan trong bài viết giúp tăng sự tương tác của độc giả, các vị trí hiển thị có thể ngay dưới tiêu đề, dưới chân bài viết hay ngay dưới thẻ mô tả bài viết thường được các trang web tin tức sử dụng. Tuy nhiên có một vị trí nữa đó là dưới dấu ngắt nhảy, khi viết bài mới sau vài dòng mở đầu thường sử dụng dấu ngắt nhảy cho nên tận dụng thêm các bài viết liên quan.

Ưu điểm của cách thêm này nếu bài viết có dấu ngắt nhảy sẽ hiển thị các bài viết liên quan, nếu bài viết không có dấu ngắt nhảy thì không hiển thị các bài viết liên quan.

Cách thực hiện

Bước 1: Đăng nhập vào Blog, truy cập Chủ đề > Chỉnh sửa HTML > Chuyển đến tiện ích > Blog1 thêm đoạn sau ngay dưới thẻ <data:post.body/> (nội dung bài viết)

Copy

<div id='related-article'>

  <ul class='related-article'/>

</div>

Bước 2: Chèn cặp thẻ tag ngay dưới cặp thẻ tag <b:includable id='post' var='post'>...</b:includable>, chọn một trong hai dạng sau:

+ Dạng bài viết liên quan ngẫu nhiên (random)

Copy

<b:includable id='relatedArticle' var='post'>

    <b:if cond='data:view.isPost'>

      <script>

      var label_name= &quot;<b:loop values='data:post.labels.length - 1' var='label'><b:eval expr='data:post.labels[label].name'/></b:loop>&quot;;

      //<![CDATA[

      $(window).on('load', function() {

        var more = document.getElementsByName('more')[0]

        if (more) {

          var flag, postsnum = 5,randarray = new Array,l = 0

          $.ajax({

            type: 'GET',

            url: '/feeds/posts/summary/-/' + label_name,

            data: {

              'max-results': 150,

              'alt': 'json'

            },

            dataType: 'jsonp',

            success: function(a) {

              var t = a.feed.openSearch$totalResults.$t;

              for (i = 0; i < postsnum;) {

                flag = 0, randarray.length = postsnum, l = Math.floor(Math.random() * t)

                for (j in randarray) l == randarray[j] && (flag = 1)

                randarray[i++] = 0 == flag && 0 != l ? l : i

              }

              for (n in randarray) {

                var r = randarray[n],

                s = a.feed.entry[r - 1]

                if (s) {

                  for (k = 0; k < s.link.length; k++)

                    if ("alternate" == s.link[k].rel) {

                      var e = s.link[k].href

                      break

                    }

                  var u = s.title.$t;

                  $('.related-article').append('<li><a title="' + u + '" href=' + e + '>' + u + '</a></li>')

                }

              }

            }

          })

          $('#related-article').appendTo(more)

        }

      })

      //]]></script>

    </b:if>

</b:includable>

+ Dạng bài liên quan mới nhất (recent)

Copy

<b:includable id='relatedArticle' var='post'>

    <b:if cond='data:view.isPost'>

      <script>

      var label_name= &quot;<b:loop values='data:post.labels.length - 1' var='label'><b:eval expr='data:post.labels[label].name'/></b:loop>&quot;;

      //<![CDATA[

      $(window).on('load', function() {

        var more = document.getElementsByName('more')[0]

        if (more) {

          $.ajax({

            type: 'GET',

            url: '/feeds/posts/summary/-/' + label_name,

            data: {

              'max-results': 5,

              'alt': 'json'

            },

            dataType: 'jsonp',

            success: function(e) {

              if (e.feed.entry) {

                for (var t = 0; t < e.feed.entry.length; t++) {

                  for (var a = 0; a < e.feed.entry[t].link.length; a++)

                    if ("alternate" == e.feed.entry[t].link[a].rel) {

                      var l = e.feed.entry[t].link[a].href

                      break

                    }

                  var u = e.feed.entry[t].title.$t

                  $('.related-article').append('<li><a title="' + u + '" href=' + l + '>' + u + '</a></li>')

                }

              }

            }

          })

          $('#related-article').appendTo(more)

        }

      })

      //]]></script>

    </b:if>

</b:includable>

Xem thêm: Hiển thị tên Nhãn trong bài viết theo vòng lặp

Bước 3: Chèn thẻ tag <b:include data='post' name='relatedArticle'/> ngay dưới chân bài viết

Ví dụ:

Copy

<b:includable id='post' var='post'>

...

<b:include data='post' name='relatedArticle'/>

</b:includable>

Bước 4: Chèn css trong <b:skin>...</b:skin>

Copy

#related-article {

  float:left;

  width:100%;

  position:relative;

  margin-bottom:20px;

  border-bottom:1px solid rgba(0,0,0,0.12);

}

#related-article ul {

  padding:15px 0 15px 15px;

  margin:0 0 0 20px;

}

#related-article ul li {

  color:#3c4043;

}

#related-article ul li a {

  color:#3c4043;

}

#related-article ul li a:hover {

  color:#1a73e8;

  text-decoration:underline;

}

Lưu ý: phần css này chỉ tham khảo theo hình demo, bạn có thể thiết kế cho phù hợp với giao diện Blog của bạn.

Khi bài viết có sử dụng dấu ngắt nhảy nội cung hiển thị các bài viết liên quan sẽ có dạng như sau:

Copy

<a name="more">

  <div id="related-article">

    <ul class="related-article">

      <li><a href="https://www.vietblogdao.com/2018/10/chia-se-kinh-nghiem-dang-ky-google-adsense-thanh-cong-cho-blog.html" tilte="Chia sẻ kinh nghiệm đăng ký Google AdSense thành công cho Blog">Chia sẻ kinh nghiệm đăng ký Google AdSense thành công cho Blog</a></li>

      <li>...</li>

      <li>...</li>

      <li>...</li>

      <li>...</li>

      <li>...</li>

    </ul>

  </div>

</a>

Nội dung chính