Code Random Post, bài viết ngẫu nhiên cho blogspot 2022

Chiện là dạo trước có tìm mấy cái random post để thêm vào blog, nhưng mà tìm hoài không thấy. Chút ấm áp, chút yêu thương riêng mình…

Code random post kiểu hiện đại trong phần khoanh đỏ

À lộn, tìm mãi méo có cái nào ưng ý, hầu hết là code cũ từ đời tống, mấy cái trang chia sẻ toàn 1 loại như nhau.

Code ramdom post đời tống.

Dùng code này thì không có vấn đề gì cả, nhưng nhược điểm là bạn không thể chỉnh ảnh hiển thị quá 72x72. Ví dụ, bạn muốn chỉnh ảnh lớn hơn nhưng mặc định của blogspot là 72x72, nên khi chỉnh lớn sẽ có hiện tượng mờ ảnh trông xấu đau đớn.

Sau vài ngày tìm kiếm chả có code random post nào ưng ý, tính từ bỏ và dùng tạm cái đời tống, và rồi hôm nay tình cờ lướt mạng thấy một trang blogspot sử dụng cái random đúng kiểu mình thích, trông cực kỳ hiện cmn đại mà không thấy share nên đã nghiên cứu và rip lun. 🤣

Demo của trang đó đây

Code random đó ở chỗ như ảnh đầu bài viết, hãy kéo xuống phần: Có Thể Bạn Đang Tìm. Giờ thì mình sẽ bắt đầu hướng dẫn cách chèn vào blogspot, cực kỳ đơn giản và méo dài dòng khó hiểu.

Bước 1: Thêm Tiện ích HTML/JavaScript rồi dán code dưới đây

<div id='random_posts'>
<ul id='bsw-may-you-like'>
<script type='text/javaScript'>//<![CDATA[
var randomposts_number=5,randomposts_chars=130,randomposts_details="yes",randomposts_comments="Bình luận",randomposts_commentsd="No Comments",randomposts_current=[],total_randomposts=0;randomposts_current=new Array(randomposts_number);function randomposts(t){total_randomposts=t.feed.openSearch$totalResults.$t}function getvalue(){for(var t=0;t<randomposts_number;t++){for(var o=!1,r=get_random(),s=0;s<randomposts_current.length;s++)if(randomposts_current[s]==r){o=!0;break}o?t--:randomposts_current[t]=r}}function get_random(){return 1+Math.round(Math.random()*(total_randomposts-1))}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts"><\/script>');
//]]></script>
<script type='text/javascript'>//<![CDATA[
function random_posts(t){for(var s=0;s<randomposts_number;s++){var a=t.feed.entry[s],e=a.title.$t;if("content"in a)var r=a.content.$t;else if("summary"in a)r=a.summary.$t;else r="";if((r=r.replace(/<[^>]*>/g,"")).length<randomposts_chars)var i=r;else{(r=r.substring(0,randomposts_chars)).lastIndexOf(" ");i=r.substring(0)+"&#133;"}for(var n=0;n<a.link.length;n++){if("thr$total"in a)var o=a.thr$total.$t+" "+randomposts_comments;else o=randomposts_commentsd;if("alternate"==a.link[n].rel){var l=a.link[n].href,d=a.published.$t;if("media$thumbnail"in a)var m=a.media$thumbnail.url;else m="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb72jQxkgd_DIIIA7tKQYhLiFThxhPo-tyqS9dabVkMwGLv9O7YGZ708KPcNCKWjjLKZB03TFxqDrKnUBdqtyLdhKtqT9MPtQpCcfBVijKAwA_5CIDSoVrRKdL6p8aYWwcBHwZQCHUlLfZH-Tn5nyKYbnAj9rcEXpuhJfswVDnkQnT-9suMcvPVdkD/s600/00.jpg"}}document.write("<li>"),document.write('<a title="'+e+'" href="'+l+'"><img alt="'+e+'" src="'+m+'"/></a>'),document.write('<div class="random-title-post"><a href="'+l+'" title="'+e+'" class="bsw-tl">'+e+"</a></div>"),"yes"==randomposts_details&&document.write('<div  class="random-info"><span>'+d.substring(8,10)+"/"+d.substring(5,7)+"/"+d.substring(0,4)+" - "+o),document.write('<br/><div class="bacsiwindows_random_in4">'+i+'</div><div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<randomposts_number;i++)document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+randomposts_current[i]+'&max-results=1&callback=random_posts"><\/script>');
//]]></script>
</ul>
  </div>

Bước 2: Chèn CSS dưới đây, nhớ là dán trước thẻ đóng ]]></b:skin>

.demo_btn_bacsiwindows:hover:after,.demo:hover:after{opacity:1;left:120%;transition:.5s}
#bacsiwindows-go-top:hover i{transform:rotate(360deg);transition:.5s ease}
#bsw-may-you-like img{object-fit:cover;width:120px;  height: 90px;padding:0;transition:.3s;margin:0 10px 0 0;box-sizing:border-box;float:left;border-radius:4px}
#random_posts .random-info span{font-size:13px;font-weight:300;color:#555}
#bsw-may-you-like img:hover{opacity:.9}
ul#bsw-may-you-like{list-style-type:none;padding:0;margin:0}
#bsw-may-you-like a{color:#330033;margin:0;font-weight: bold;  font-size: 14px;
}
#bsw-may-you-like a:hover{color:#df5b5b}
.bacsiwindows_random_in4{
font-size: 13px;    width: 100%;
color: #555555;
font-weight: 400;}
#bsw-may-you-like li{margin: 0 0 10px; float: left; width: 100%; clear: both;}
#bsw-may-you-like li br{display:table;content:'';padding:3px 0}
#random_posts{clear:both;padding:0;box-sizing:border-box;overflow:hidden}
.random-title{clear: both; font-size: 18px; padding: 10px 0; border-top: 1px solid #eee; font-weight: 500; color: #4a4854; margin: 0 0 10px;}
.random-title span{padding:10px 0 0;border-top:1px solid #666}
.random-title-post{    position: relative;
line-height: 22px;
/* display: -webkit-box; */
/* overflow: hidden; */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
padding: 0;}

  .bsw-lists .post_snippet p{display:none}
  .ripple i:hover{cursor: pointer;}
.random-info {  width: 100%;   margin: 5px 0;

}
#bsw-may-you-like li:nth-of-type(1) img {
    margin: 0 0 10px 0;
    filter: brightness(30%);
    width: 100%;
    height: 170px;
}
.random-info span {
    font-size: 90%;
}
#bsw-may-you-like li:nth-of-type(1) .random-title-post a {
      margin-top: 30px;
    position: absolute;
    left: 0;
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-shadow: 0 0 5px #111;
    font-size: 22px;
    /* transform: translate(0,-50%); */
    padding: 0 15px;
    color: #fafafa;
    text-align: center;
    box-sizing: border-box;
    clear: both;
}

Bước cuối: Chèn code dưới sau thẻ đóng ]]></b:skin>

<script>//<![CDATA[

$(document).ready(function(){$("#bsw-may-you-like img").attr("src",function(a,b){return b.replace("s72-c","s500")})});
$(document).ready(function(){$(".relatedsumposts img").attr("src",function(a,b){return b.replace("s72-c","s500")})});

//]]></script>

Xong rồi, giờ thì lưu cmn lại và F5 xem kết quả nhé! Vui lòng không chỉnh sửa gì thêm nếu không muốn bị lỗi, còn nếu muốn chỉnh sửa mà không biết đường thì hãy cmt bên dưới để được giải đáp.

Ưu điểm của random post này là trông nó hiện đại hơn với code đời tống, có thể chỉnh kích cỡ ảnh thoải mái mà méo bị mờ. Nhược điểm thì mấy bài viết có chèn video của youtube thì thumbnail nó mặc định là 120x90, vẫn chưa tìm ra cách cho nó lớn hơn mà không bị mờ.

Tiện đây có pro nào làm được cái này thì hãy cmt chia sẻ cho mọi người cùng biết nhá, cách để tăng chất lượng ảnh thumbnail của Youtube cho code trên kiểu như này: ("default.jpg", "sddefault.jpg"); Đã thử nhiều cách trên mạng, thậm trí mò qua mấy trang indo, và nhiều trang nước ngoài mà vẫn không làm được. 😩 Gà vãi...

Hashtag: Code Random Post, bài viết ngẫu nhiên cho blogspot 2022

Blogger Chitose2D Code hay tiện ích

• Facebook
• Pinterest

Liên quan gần đây

Code hay tiện ích