Cách tạo bài viết liên quan đẹp mắt cho Blogspot đơn giản nhất

Xin chào anh em, nếu như anh em đã click vào bài viết này thì chắc chắn anh em đang tìm kiếm code tạo bài viết liên quan cho blog của mình đúng không nào? Còn trường hợp click nhầm thì mình không biết nhé :)). Bài viết liên quan nó là danh sách các bài viết có nội dung tương tự hoặc liên quan đến bài viết bạn đang xem, được chia nhỏ theo danh mục, thẻ hoặc tiêu đề bài viết. Bài viết liên quan còn được gọi là Related Post trong tiếng Anh. Mình cũng đang cần thêm nó vào cho template Median UI của mình, sẵn tích hợp xong nên chia sẻ cho anh em nào cần luôn.

Cách tạo bài viết liên quan đẹp mắt cho Blogspot đơn giản nhất

Giới thiệu

Như bạn thấy, các bài viết liên quan không chỉ làm cho bài viết của chúng ta đẹp hơn, chuyên nghiệp hơn mà còn có thể giúp chúng ta điều hướng người dùng tốt hơn và giúp cho người đọc có thể dễ dàng tìm thấy các bài viết có cùng nội dung hoặc chủ đề hơn. Từ đó sẽ giúp chúng ta tăng thêm lượng traffic truy cập bài viết nữa. Chính vì mình dùng Median UI V1.7 nên có dùng 2 phiên bản Dark - Light.

Demo bài viết liên quan phiên bản Light

Demo bài viết liên quan phiên bản Light

Cách thực hiện

Bước 1: Đăng nhập vào trang quản lý Blogger

Bước 2: Ấn vào Chủ đề ➤ Chỉnh sửa HTML

Bước 3: Ấn Ctrl + F để hiển thị thanh tìm kiếm ➤ nhập dòng chữ <b:defaultmarkup type='Common'>

Bước 4: Copy toàn bộ đoạn code bên dưới dán vào dưới dòng chữ ở bước 3

<b:includable id='postTextRelated'>
  <div class='postRelated' id='postRelated'>
    <script>
      /*<![CDATA[*/
      var relatedTitles = new Array();
      var relatedTitlesNum = 0;
      var relatedUrls = new Array();

      function related_results_labels(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i];
          relatedTitles[relatedTitlesNum] = entry.title.$t;
          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              relatedUrls[relatedTitlesNum] = entry.link[k].href;
              relatedTitlesNum++;
              break;
            }
          }
        }
      }

      function removeRelatedDuplicates() {
        var tmp = new Array(0);
        var tmp2 = new Array(0);
        for (var i = 0; i < relatedUrls.length; i++) {
          if (!contains(tmp, relatedUrls[i])) {
            tmp.length += 1;
            tmp[tmp.length - 1] = relatedUrls[i];
            tmp2.length += 1;
            tmp2[tmp2.length - 1] = relatedTitles[i];
          }
        }
        relatedTitles = tmp2;
        relatedUrls = tmp;
      }

      function contains(a, e) {
        for (var j = 0; j < a.length; j++)
          if (a[j] == e) return true;
        return false;
      }

      function printRelatedLabels() {
        var r = Math.floor((relatedTitles.length - 1) * Math.random());
        var i = 0;
        document.write('<ul>');
        while (i < relatedTitles.length && i < 20) {
          document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
          if (r < relatedTitles.length - 1) {
            r++;
          } else {
            r = 0;
          }
          i++;
        }
        document.write('</ul>');
      }
      /*]]>*/
    </script>

    <b:if cond='data:post.labels'>
      <b:loop index='i' values='data:post.labels' var='label'>
        <b:if cond='data:i<1'>
          <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' rel='preload'/>
        </b:if>
      </b:loop>
    </b:if>

    <b>Bài viết liên quan: </b>
    <script>
      removeRelatedDuplicates();
      printRelatedLabels();
    </script>
  </div>
</b:includable>

Phần max-result = 3 vẫn có thể thay đổi được, nên các bạn cứ tự nhiên. Số 3 là số dòng post liên quan muốn hiển thị, bạn có thể điều chỉnh nó khi bạn muốn.

Bước 5: Ấn Ctrl + F để hiển thị thanh tìm kiếm ➤ nhập dòng chữ  <data:post.body/> và dán đoạn code bên dưới vào thẻ <data:post.body/>

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/>
<script>
  /*<![CDATA[*/
  function insertAfter(tbh, tgt) {
    var prt = tgt.parentNode;
    if (prt.lastChild == tgt) {
      prt.appendChild(tbh);
    } else {
      prt.insertBefore(tbh, tgt.nextSibling);
    }
  }

  var tgt = document.getElementById("postBody");
  var midAd3 = document.getElementById("postRelated");
  var showAd3 = tgt.getElementsByTagName("p");

  if (showAd3.length > 0) {
    insertAfter(midAd3, showAd3[5]);
  };
  /*]]>*/
</script>

(midAd3,showAd3[5] đã được đánh dấu số 5 có nghĩa là bài liên quan sẽ xuất hiện sau đoạn thứ 5 các bạn có thể tự điều chỉnh lại. Nếu các bạn để 50 hoặc cao hơn thì nó sẽ cố định ở cuối bài viết.

Bước 6: Bạn tìm đến dòng chữ /*]]>*/</style> và dán được code bên dưới vào trên thẻ này.

:root {
    --relatedBorder: #3d88fc;
    --relatedText: #333;
    --relatedBg: #f9f9f9;
}

body[data-theme='dark'] {
    --relatedBorder: #f9d43f;
    --relatedText: #d9e2f0;
    --relatedBg: #171717;
}

#postRelated {
    border: 2px solid var(--relatedBorder);
    padding: 20px;
    background-color: var(--relatedBg);
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#postRelated b {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--themeLink); /* Chưa có khai báo biến themeLink */
}

#postRelated ul {
    list-style-type: none;
    padding: 0;
}

#postRelated ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

#postRelated ul li::before {
    content: '\2022';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--relatedText);
    font-size: 30px;
}

#postRelated ul li a {
    color: var(--relatedText);
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

body[data-theme='light'] #postRelated ul li a:hover {
    color: #fff;
    background-color: var(--relatedBorder);
    transition: background-color 0.3s, color 0.3s;
}

Đoạn CSS này mình không có đưa màu vô cụ thể, mình sử dụng biến để xác định màu cho phần tử được áp dụng. Thay vì sử dụng một màu cụ thể, biến này được đặt để thay đổi dựa trên các giá trị đã được xác định trong phần khai báo biến của CSS. Điều này giúp tạo ra một cách linh hoạt và dễ dàng thay đổi màu sắc trong toàn bộ tài liệu CSS một cách hiệu quả. Còn nếu các bạn không thích thì cứ thay mã màu vào là được.

Bước 7: Sau khi làm xong bạn ấn Lưu chủ đề là được nhé.

Kết luận

Trên đây là hướng dẫn của mình cho các bạn cách tạo bài viết liên quan cho blogsopot. Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về quyền sở hữu trí tuệ, hãy để lại ý kiến của bạn bên dưới để chúng tôi biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.

Thông tin liên hệ:

Thành Trương Blog

Chịu trách nhiệm nội dung: Nguyễn Thành Trương

Địa chỉ: Xã Tân Thành, Huyện Bình Tân, Tỉnh Vĩnh Long

Email: thanhtruongblog@gmail.com

Số điện thoại: 0973.898.830

Website: https://www.thanhtruongblog.com/

Nguồn: https://www.thanhtruongblog.com/2024/03/tao-bai-viet-lien-quan-cho-blogspot.html