Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 77
          • 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 42

                    Code random posts hiển thị đầy đủ tóm tắt thông tin của một post

                    Hôm nay rãnh rỗi ngồi code lại tiện ích các bài viết liên quan random posts widget. Mình đã chỉnh sửa lại rất nhiều và đã hoàn thiện code hiển thị đầy đủ tóm tắt thông tin của một bài viết. Thật ra code gốc này đã được chia sẻ lâu rồi, công việc của mình là phát triển nó tối ưu hơn và không bị lỗi.

                    Sau quá trình tham khảo lại tất cả code được chia sẻ trên mạng và code mình viết từ trước tới nay nếu như áp dụng thử với các Blog khác nhau đều gặp tình trạng chung báo lỗi vì trong code đang thiếu điều kiện khi dữ liệu trong nguồn cấp bị thiếu. Do đó mình quyết định bỏ thời gian ra viết lại và hoàn thành được code đầy đủ không báo lỗi khi áp dụng với các Blog khác nhau

                    Code recent posts hiển thị đầy đủ tóm tắt thông tin của một post

                    Xem demo tại: https://vietblognet.blogspot.com

                    Thông tin về code


                    + Hiển thị đầy đủ thông tin tóm tắt của 1 post bao gồm:
                    • Tiêu đề
                    • Liên kết
                    • Ảnh
                    • Tên tác giả
                    • Ảnh tác giả
                    • Liên kết hồ sơ tác giả
                    • Ngày đăng
                    • Nhãn (cuối)
                    • Số nhận xét
                    • Tóm tắt (Đoạn trích)
                    + Sửa lỗi:
                    • Bài viết không thêm nhãn
                    • Bài viết không có ảnh
                    • Tắt nhận xét
                    • Không có liên kết hồ sơ tác giả
                    • Tác giả xóa hồ sơ
                    + Cài đặt hiển thị:
                    • Số bài mỗi lần tải: rdp_numposts
                    • Số từ của đoạn tóm tắt: rdp_snippet_length
                    • Ảnh bài viết: showthumbnail // Sửa true thành false nếu không hiển thị
                    • Thông tin về: showinfo // Sửa true thành false nếu không hiển thị
                      • Tác giả: showauthor (Ảnh, Tên, Liên kết hồ sơ) // Sửa true thành false nếu không hiển thị
                      • Ngày đăng: showpublished // Sửa true thành false nếu không hiển thị
                      • Nhãn (cuối): showcategory // Sửa true thành false nếu không hiển thị
                      • Số nhận xét: showcomment // Sửa true thành false nếu không hiển thị
                    • Tóm tắt (Đoạn trích): showsummary // Sửa true thành false nếu không hiển thị
                    • Ảnh thay thế nếu bài không có ảnh: thumbnailurl // Giữ nguyên hoặc thay liên kết ảnh khác
                    Để code không báo lỗi trước hết bạn cần kiểm tra nguồn cấp dữ liệu Blog để chắc chắn rằng nguồn cấp dữ liệu không bị tắt. Các bạn truy cập mục Cài đặt > Khác > Nguồn cấp dữ liệu trang web > Cho phép nguồn cấp dữ liệu blog > chọn Cho đến dấu ngắt

                    Cài đặt code


                    Chèn script trước thẻ đóng </body> của template

                    Copy
                    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
                    <script>
                    // Cài đặt hiển thị
                      var rdp_numposts = 7, // Số bài viết hiển thị
                        rdp_snippet_length = 150, // Số từ tóm tắt
                        rdp_current = [],
                        rdp_total_posts = 0,
                        rdp_current = new Array(rdp_numposts),
                        showthumbnail = true, // Hiển thị Ảnh bài viết sửa thành false nếu không hiển thị
                        showinfo = true, // Hiển thị tác giả, ngày đăng, tên nhãn, số nhận xét sửa thành false nếu không hiển thị
                        showauthor = true, // Hiển thị tác giả sửa thành false nếu không hiển thị
                        showpublished = true, // Hiển thị ngày đăng sửa thành false nếu không hiển thị
                        showcategory = true, // Hiển thị tên nhãn sửa thành false nếu không hiển thị
                        showcomment = true, // Hiển thị số nhận xét sửa thành false nếu không hiển thị
                        showsummary = true, // Hiển thị đoạn tóm tắt sửa thành false nếu không hiển thị
                        thumbnailurl = "https://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/s1600/safe_image.png&quot;, // Ảnh thay thế có thể thay bằng ảnh khác hoặc giữ nguyên
                        commenttext = "<data:messages.comments/>", // Nhận xét
                        postcommenttext = "<data:messages.postAComment/>"; // Đăng nhận xét
                    //<![CDATA[
                    function totalposts(a) {
                      rdp_total_posts = a.feed.openSearch$totalResults.$t
                    }
                    document.write('<script src="/feeds/posts/summary?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');

                    function getvalue() {
                      for (var b = 0; b < rdp_numposts; b++) {
                        if (rdp_numposts < rdp_total_posts) {
                          var d = false;
                          var c = get_random();
                          for (var a = 0; a < rdp_current.length; a++) {
                            if (rdp_current[a] == c) {
                              d = true;
                              break
                            }
                          }
                          if (d) {
                            b--
                          } else {
                            rdp_current[b] = c;
                          }
                        } else {
                          rdp_numposts = rdp_total_posts;
                        }
                      }
                    }

                    function get_random() {
                      var a = 1 + Math.round(Math.random() * (rdp_total_posts - 1));
                      return a
                    };
                    //]]></script>
                    <script > //<![CDATA[
                      function random_posts(t) {
                        if (t.feed.entry) { // Điều kiện Blog đã có bài viết
                          for (var e = 0; e < t.feed.entry.length; e++) {
                            var entry = t.feed.entry[e];
                            for (var d = 0; d < entry.link.length; d++) {
                              if ('alternate' == entry.link[d].rel) {
                                var rdp_url = entry.link[d].href;
                                break
                              }
                            }
                            var rdp_title = entry.title.$t,
                              post_title = '<div class="post_title"><a href=' + rdp_url + ' title="' + rdp_title + '">' + rdp_title + '</a></div>';
                            if (showthumbnail == true) { // Điều kiện hiển thị ảnh
                              if ('media$thumbnail' in entry) { // Nếu bài viết có ảnh
                                var post_thumb = '<div class="post_thumb"><a href=' + rdp_url + ' title="' + rdp_title + '"><img alt="' + rdp_title + '" src=' + entry.media$thumbnail.url.replace('s72-c', 's1600') + ' /></a></div>';
                              } else {
                                post_thumb = '<div class="post_thumb"><a href=' + rdp_url + ' title="' + rdp_title + '"><img alt="' + rdp_title + '" src=' + thumbnailurl + ' /></a></div>';
                              }
                            } else {
                              post_thumb = '';
                            }
                            if (showinfo == true) { // Điều kiện hiển thị tác giả, ngày đăng, tên nhãn, số nhận xét
                              if (showauthor == true) { // Điều kiện hiển thị tác giả
                                for (var i = 0; i < entry.author.length; i++) {
                                  if (entry.author[i].uri) { // Điều kiện tác giả không xóa hồ sơ
                                    var rdp_author_uri = entry.author[i].uri.$t,
                                      rdp_author_name = entry.author[i].name.$t,
                                      rdp_author_imagesrc = entry.author[i].gd$image.src.replace('s512-c', 's40-c'),
                                      post_author = '<span class="post_author"><a href=' + rdp_author_uri + ' title="' + rdp_author_name + '" rel="noopener" target="_blank"><img src=' + rdp_author_imagesrc + ' alt="' + rdp_author_name + '"/><span>' + rdp_author_name + '</span></a></span>';
                                  } else {
                                    post_author = '<span class="post_author"><a href="javascript:;" title="' + rdp_author_name + '" rel="noopener" target="_blank"><img src=' + rdp_author_imagesrc + ' alt="' + rdp_author_name + '"/><span>' + rdp_author_name + '</span></a></span>';
                                  }
                                }
                              } else {
                                post_author = '';
                              }
                              if (showpublished == true) { // Điều kiện hiển thị ngày đăng
                                var rdp_published = entry.published.$t,
                                  post_published = '<span class="post_timestamp">' + rdp_published.substring(8, 10) + ' thag ' + rdp_published.substring(5, 7) + ', ' + rdp_published.substring(0, 4) + '</span>';
                              } else {
                                post_published = '';
                              }
                              if (showcategory == true) { // Điều kiện hiển thị nhãn
                                if ('category' in entry) { // Điều kiện nếu bài viết có nhãn
                                  for (var l = 0; l < entry.category.length; l++) {
                                    var rdp_category = entry.category[l].term,
                                      rdp_category_url = '/search/label/' + rdp_category;
                                  }
                                  var post_label = '<span class="post_label"><a href="' + rdp_category_url + '" title="' + rdp_category + '">' + rdp_category + '</a></span>';
                                } else {
                                  post_label = '';
                                }
                              } else {
                                post_label = '';
                              }
                              if (showcomment == true) { // Điều kiện hiển thị nhận xét
                                if ('thr$total' in entry) { // Điều kiện nếu bài viết không tắt nhận xét
                                  var rdp_cmtnum = entry.thr$total.$t;
                                  if (rdp_cmtnum >= 1) {
                                    var post_comment = '<span class="post_comment"><a href=' + rdp_url + "#comments" + ' title="' + postcommenttext + '">' + rdp_cmtnum + " " + commenttext + '</a></span>';
                                  } else {
                                    post_comment = '<span class="post_comment"><a href=' + rdp_url + "#comments" + ' title="' + postcommenttext + '">' + postcommenttext + '</a></span>';
                                  }
                                } else {
                                  post_comment = '';
                                }
                              } else {
                                post_comment = '';
                              }
                              var post_meta = '<div class="post_meta">' + post_author + post_label + post_published + post_comment + '</div>';
                            } else {
                              post_meta = '';
                            }
                            if (showsummary == true) { // Điều kiện hiển thị tóm tắt
                              if ('summary' in entry) { // Nếu bài viết có nội dung bằng chữ
                                var rdp_snippet = entry.summary.$t,
                                  rdp_summary = '',
                                  re = /<\S[^>]*>/g,
                                  rdp_snippet = rdp_snippet.replace(re, '');
                                if (rdp_snippet.length < rdp_snippet_length) {
                                  rdp_summary = rdp_snippet;
                                } else {
                                  rdp_snippet = rdp_snippet.substring(0, rdp_snippet_length);
                                  var quoteEnd = rdp_snippet.lastIndexOf(' ');
                                  rdp_snippet = rdp_snippet.substring(0, quoteEnd);
                                  rdp_summary = rdp_snippet;
                                }
                                var post_summary = '<div class="post_snippet"><p>' + rdp_summary + '...</p></div>';
                              } else {
                                post_summary = '';
                              }
                            } else {
                              post_summary = '';
                            }
                            var rdp_canonicalurl = $('link[rel="canonical"]').attr('href');
                            if (rdp_canonicalurl === rdp_url) { // Điều kiện url bài viết bằng với url của trang
                              $('.random_posts.').append('<article class="post current">' + post_thumb + post_title + post_meta + post_summary + '</article>');
                              $('.random_posts').find($('.post.current')).remove() // Xóa url bài viết
                            } else {
                              $('.random_posts').append('<article class="post">' + post_thumb + post_title + post_meta + post_summary + '</article>');
                            }
                          }
                        }
                      }
                    getvalue();
                    for (var i = 0; i < rdp_numposts; i++) {
                      document.write('<script src="/feeds/posts/summary?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts"><\/script>');
                    }
                    //]]></script>

                    + Chèn code vào vị trí muốn hiển thị ví dụ như widget HTML

                    Copy
                    <div class='widget-content'>
                        <div class='random_posts'/>
                    </div>

                    + CSS tham khảo

                    Copy
                    <style type='text/css'>/* <![CDATA[ */
                    .post {
                        width: 100%;
                        float: left;
                        margin-bottom: 15px;
                        padding-bottom: 15px;
                        border-bottom: 1px solid rgba(0,0,0,0.12);
                    }
                    .post:last-child {
                        margin: 0;
                        border: 0;
                    }
                    .post_thumb {
                        float: left;
                        width: 40%;
                    }
                    .post_thumb a {
                        display: flex;
                        position: relative;
                        padding-bottom: 56.25%;
                    }
                    .post_thumb img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                    .post_title {
                        display: table;
                        padding-left: 15px;
                        font-size: 22px;
                        font-weight: normal;
                    }
                    .post_title a {
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #3c4043;
                    }
                    .post_title a:hover {
                        color: #365899;
                    }
                    .post_title a:visited {
                        color: #707070;
                    }
                    .post_meta {
                        display: table;
                        padding: 10px 0 0 15px;
                    }
                    .post_meta a {
                        color: #3c4043;
                    }
                    .post_meta a:hover {
                        color: #365899;
                    }
                    .post_meta .post_author img {
                        width: 24px;
                        height: 24px;
                        overflow: hidden;
                        border-radius: 50%;
                        vertical-align: middle;
                        margin-right: 5px;
                    }
                    .post_meta .post_timestamp:before, .post_meta .post_label:before, .post_meta .post_comment:before {
                        content: '-';
                        padding: 0 5px;
                    }
                    .post_snippet {
                        display: table;
                        padding: 10px 0 0 15px;
                    }
                    .post_snippet p {
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 15px;
                    }
                    @media screen and (max-width: 414px) {
                        .post_thumb {
                            width: 45%;
                        }
                        .post_title {
                            font-size: medium;
                        }
                        .post_title a {
                            -webkit-line-clamp: 3;
                        }
                        .post_meta {
                            padding: 5px 0 0 15px;
                        }
                        .post_snippet {
                            display: none;
                        }
                    }
                    /* ]]> */</style>

                    Code được mình viết rất kỹ nhưng vẫn có thể gặp sai xót khi nguồn cấp feeds cập nhật thay đổi dữ liệu do đó mình vẫn cập nhật code thường xuyên.
                    Nội dung chính