Tạo tiện ích bài đăng gần đây recent posts widget

Vâng nghe tên thôi đã thấy nó xưa như trái đất rồi đừng nhắc lại làm gì nữa ai cũng biết cả rồi và Blog nào chả có. Nhưng thôi kệ cứ viết ra đây ai đọc thì đọc vì phương pháp mình đưa ra có mới mẻ hơn chút không sử dụng phương thức callback mà yếu tố này thường làm giảm tốc độ tải trang thay vào đó sử dụng phương thức GET có ưu điểm hơn nhưng phương thức này lại đòi hỏi thư viện link jquery mà đa số mẫu template nào cũng có.

Hình minh họa tiện ích các bài viết gần đây

Vào chủ đề chính trước hết bạn cần tạo đoạn javascript và đặt chúng ngay trước thẻ đóng </body>

Copy


<script>//<![CDATA[

$.ajax({

  url: '/feeds/posts/summary',

  type: 'get',

  dataType: 'jsonp',

  data: {

    'max-results': '5',

    alt: 'json-in-script'

  },

  success: function(data) {

    for (var i = 0; i < data.feed.entry.length; i++) {

      for (var j = 0; j < data.feed.entry[i].link.length; j++) {

        if (data.feed.entry[i].link[j].rel == 'alternate') {

          var postUrl = data.feed.entry[i].link[j].href;

          break;

        }

      }

      var w = ' thag ';

      var x = ', ';

      var t = data.feed.entry[i].published.$t;

      var postPublished = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4);

      var postImagesrc = data.feed.entry[i].author[0].gd$image.src;

      var postUri = data.feed.entry[i].author[0].uri.$t

      var postTitle = data.feed.entry[i].title.$t;

      var postThumbnail;

      try {

        postThumbnail = data.feed.entry[i].media$thumbnail.url.replace('s72-c', 's1600');

      } catch (error) {

        postThumbnail = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/s1600/safe_image.png';

      }

      var postAuthor = data.feed.entry[i].author[0].name.$t;

      var postSnippet = data.feed.entry[i].summary.$t;

      document.getElementById("recent-posts").innerHTML += '<li><div class="post-thumb"><a href=' + postUrl + ' title="' + postTitle + '"><img src=' + postThumbnail + ' alt="' + postTitle + '" /></a></div><h2 class="post-title"><a href=' + postUrl + ' title="' + postTitle + '">' + postTitle + '</a></h2><div class="post-meta"><span class="post-author"><a href=' + postUri + ' title="' + postAuthor + '">' + postAuthor + '</a></span><span class="post-date">' + postPublished + '</span></div><p class="post-snippet">' + postSnippet + '</p></li>';

    }

  }

});

//]]></script>

Bạn thay số 5 màu đỏ bằng số bài viết muốn hiển thị.

Khi tạo xong việc tiếp theo bạn thêm đoạn mã sau vào nơi muốn hiển thị bài viết ví dụ trong widget thì bạn chọn thêm 1 tiện ích HTML/Javascript sau đó thêm vào trong phần nội dung:

Copy


<ul id ="recent-posts"></ul>

Hình minh họa:

Phần làm đẹp cho bố cục bài viết tức là viết css thì các bạn tự thiết kế theo sở thích của mình, mình đưa ra các class hiển thị của bài viết:

+ Class ảnh: .post-thumb và .post-thumb img
+ Class tiêu đề h2.post-title và h2.post-title a
+ Class meta bao gồm class tác giả và class thời gian: .post-meta, .post-author, .post-date.
+ Class tóm tắt: .post-snippet

Các bài viết ngẫu nhiên khi hiển thị trong HTML có dạng sau:

Copy


<ul id="recent-posts">

  <li>

    <div class="post-thumb">

      <a href="link bài viết" title="tiêu đề bài viết">

        <img src="link ảnh" alt="tiêu đề bài viết">

      </a>

    </div>

    <h2 class="post-title">

      <a href="link bài viết" title="tiêu đề bài viết">tiêu đề bài viết</a>

    </h2>

    <div class="post-meta">

      <span class="post-author"><a href="link Google profile" title="tên tác giả">tên tác giả</a></span>

      <span class="post-date">ngày tháng, năm </span>

    </div>

    <p class="post-snippet">đoạn tóm tắt bài viết</p>

  </li>

  <li>...</li>

  <li>...</li>

  <li>...</li>

  <li>...</li>

</ul>