Chia Sẻ Code Random Post Hiển Thị Đầy Đủ Giống Một Bài Viết Blog

 Chào bạn! có lẽ bạn sẽ cần vài code hiển thị như Code Random Post Hiển Thị Đầy Đủ Giống Một Bài Viết Blogspot, từ mọi thông tin, đọc thêm, tác giả, ngày tháng đều hiển thị đầy đủ.

Bài viết Random post hiển thị đầy đủ và đẹp
Bài viết Random post hiển thị đầy đủ và đẹp

- Xem DEMO tại đây>>>.

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

- Xem thêm: Chia Sẻ Code Menu Blogspot Giống Homedy Đẹp Chuyên Nghiệp

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

Thông tin về code

Về code này được chia sẻ từ anh Tiến, mình thấy đẹp và xin phép Share lại cho tất cả mọi người, để mọi người có thể sài nếu cần hoặc thích.

+ 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

<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

<div class='widget-content'>

    <div class='random_posts'/>

</div>

+ CSS tham khảo

<style type='text/css'>

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


- Sau khi past đầy đủ các CSS và HTML vào nơi mà bạn muốn hiển thị thì bạn lưu lại và xem thành quả

Trên đây là code Random post hiển thị đầy đầy đủ giống như 1 bài viết blog, nếu bạn thấy blog chia sẻ hữu ích thì bạn có thể đánh giá bài viết góp ý giúp mình nhé!

Để mình hoàn thiện các bài viết sau nó chuyên nghiệp hơn và tóm tắt nội dung hơn.

Điểm 4.6/5 dựa vào 87 đánh giá
Đánh giá bài viết?

Post a Comment