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.

Tạo tiện ích bài đăng ngẫu nhiên random posts widget
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://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/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:

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

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!!!

4
Hãy để lại một câu trả lời bạn muốn

avatar
250
4 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Thành SanhVương Hiệp Recent comment authors
  Subscribe  
Mới nhất Lâu đời nhất
Thông báo
Thành Sanh
Khách

Thanks bác, em tìm mãi

Thành Sanh
Khách

postThumbnail
Không chỉnh được kích thước bác ơi,
ảnh của em trong bài viết để kích thước ban đầu

postThumbnail > nó cũng ra ảnh kích thước ban dầu s1600 to đùng

Vương Hiệp
Khách

bác cho e xin đoạn css luôn đi

Vương Hiệp
Khách

bác cho e xin đoạn css luôn đi

Scroll to top
0353.456.495