Tạo tiện ích bài đăng ngẫu nhiên random posts widget

Hôm nay chủ nhật rãnh rỗi ngồi cà phê ngắm gái à quên ngắm cái Blog của mình chợt thấy nó thiếu thiếu cái gì 😏 mãi mới nhận ra thì ra là chưa có tiện ích bài đăng ngẫu nhiên để đua đòi cho bằng chúng bạn, vậy nên ngồi viết vài đoạn javascript nho nhỏ.

Như tiêu đề bài viết đây là kiểu bài viết được hiển thị và sắp xếp ngẫu nhiên tuy nhiên nó cũng dựa vào feed để lấy dữ liệu chỉ là cách viết javascript nó hơi khác đi một chút so với các kiểu bài đăng gần đây, bài đăng liên quan.

Hình minh họa tiện ích các bài viết ngẫu nhiên

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[

var randarray = new Array();

var l = 0;

var flag;



function randomposts(json) {

  var total = parseInt(json.feed.openSearch$totalResults.$t, 10);

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

    flag = 0;

    randarray.length = numposts;

    l = Math.floor(Math.random() * total);

    for (j in randarray) {

      if (l == randarray[j]) {

        flag = 1;

      }

    }

    if (flag == 0 && l != 0) {

      randarray[i++] = l;

    }

  }

  for (n in randarray) {

    var p = randarray[n];

    var entry = json.feed.entry[p - 1];

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

      if (entry.link[k].rel == 'alternate') {

        var w = ' thag ';

        var x = ', ';

        var t = entry.published.$t;

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

        var postUrl = entry.link[k].href;

        var postTitle = entry.title.$t;

        var postThumbnail;

            try {

                var postThumbnail = entry.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 = entry.author[0].name.$t;

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

        var postSnippet = entry.summary.$t.substring(0, (snippet));

        document.getElementById('random-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>

<script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=randomposts'/>

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

<script>var numposts = 5; var snippet = 150;</script><ul id ="random-posts"></ul>

Trong đó:

- 5: là số bài viết muốn hiển thị
- 150: là số từ muốn cắt của đoạn tóm tắt bài viết.

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="random-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>

Chấm hết bài!!!

Nội dung chính