Blogger: hiện danh sách 5 bài đăng có chứa từ khóa chỉ định trong tiêu đề các bài đăng trên trang blogspot của mình - JavaScript và HTML

[cpb4blogger] chia sẻ Mã code JavaScript và HTML sau đây để giúp lấy link 5 bài đăng có chứa cụm từ khóa được chỉ định  trong tiêu đề trên blog làm bằng blogspot của google.

 Demo này hướng dẫn bạn từng bước khi thực hiện trên blogger.com

Để hiển thị danh sách 5 bài đăng gần đây có chứa từ khóa "dien" trong tiêu đề, bạn có thể sử dụng AJAX và JSON Feed để truy xuất thông tin từ blogspot của mình. 

Dưới đây là ví dụ về cách thực hiện điều này:

Bước 1: Trong trình đơn Blogger, chọn "Theme" > "Edit HTML".

Bước 2: Thêm đoạn mã JavaScript và HTML sau vào nơi bạn muốn hiển thị danh sách bài đăng trong bài đăng mới của mình:

Đây bạn copy nhé.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

  $(document).ready(function () {

    // Đường dẫn đến JSON Feed của blogspot của bạn

    var feedUrl = 'https://kienthucvatli002.blogspot.com/feeds/posts/default?alt=json';

    // Tạo một request để lấy dữ liệu từ JSON Feed

    $.ajax({

      url: feedUrl,

      type: 'GET',

      dataType: 'jsonp',

      success: function (data) {

        // Xử lý dữ liệu ở đây, ví dụ hiển thị tên bài đăng và liên kết

        var entries = data.feed.entry;

        var filteredPosts = [];

        // Lọc bài đăng có chứa "dien" trong tiêu đề

        for (var i = 0; i < entries.length; i++) {

          var postTitle = entries[i].title.$t.toLowerCase();

          // Kiểm tra xem tiêu đề có chứa "dien" không

          if (postTitle.includes('điện')) {

            filteredPosts.push(entries[i]);

          }

          // Chỉ lấy 5 bài đăng

          if (filteredPosts.length >= 15) {

            break;

          }

        }

        // Hiển thị danh sách bài đăng

        for (var j = 0; j < filteredPosts.length; j++) {

          var postTitle = filteredPosts[j].title.$t;

          var postLink = filteredPosts[j].link.find(function (link) {

            return link.rel === 'alternate';

          }).href;

          // Hiển thị tên bài đăng và liên kết trên trang web của bạn

          $('#filtered-posts').append('<p><a href="' + postLink + '">' + postTitle + '</a></p>');

        }

      },

      error: function (error) {

        console.error('Error fetching filtered posts:', error);

      },

    });

  });

</script>

<div id="filtered-posts"></div>

Bước 3: Lưu lại và kiểm tra trang web của bạn để xem kết quả.

Đoạn mã trên sẽ hiển thị danh sách 5 bài đăng gần đây từ blogspot của bạn mà có chứa từ khóa "dien" trong tiêu đề. Nếu bạn xuất bản một bài đăng mới, danh sách sẽ được cập nhật mỗi khi trang web được tải lại.

Demo trên https://kienthucvatli002.blogspot.com sẽ như sau

 Bài viết này thuộc chủ đề "Hướng dẫn cách làm". Bạn có thể tìm lại bài viết này bằng các từ khóa sau: 

Khi xuất bản bài đăng mới, tôi muốn hiện danh sách 5 bài đăng có chứa "dien*" trong tiêu đề các bài đăng trên blog của mình. Truy vấn có dạng: "điện", dien", hoặc "Điện tích" , ... đều được.

 Như vậy, Blog Mẹo blogger đã chia sẻ cách hiển thị 5 bài có chứa từ khóa được chỉ định trong một khoảng thời gian 2 năm tính từ mốc thời gian cụ thể. Chúc bạn thành công! 

Nguồn bài viết: http://cpb4blogger.blogspot.com/