Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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