Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 82
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    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!!!
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn