Hướng dẫn tạo bài viết ngẫu nhiên cho blogspot 2021
Hướng dẫn tạo bài viết ngẫu nhiên cho blogspot. Tiện ích bài viết ngẫu nhiên cho blogspot giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì sẽ tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải.
Hướng dẫn tạo bài viết ngẫu nhiên cho blogspot 2021 |
Hướng dẫn tạo bài viết ngẫu nhiên cho blogspot
Css giao diện
Sao chép mã CSS này vào trước thẻ đóng ]]</b:skin>
#randomposts{padding:10px 10px 0}#randomposts .random_item{margin:0 10px 10px 0;display:block;float:left;width:calc(50% - 10px);height:auto;}#randomposts .random_items,#randomposts .random_item:nth-child(odd),#randomposts .random_item .clear{clear:both;}#randomposts .random_items{margin-right:-10px;}#randomposts .url_item{display:block;text-decoration:none;}#randomposts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:auto;transition:all 400ms ease-in-out;}#randomposts .random_item:hover .img_item{opacity:.7;}#randomposts .title_item{display:block;padding-right:10px;text-align:left;margin:0;color:#000;font-weight:400;line-height:1.1;transition:all 400ms ease-in-out;}#randomposts .random_item:hover .title_item{color:#555;}
Javascript/HTML
Dán mã dưới đây vào widget blog
<div id='randomposts'><script>//<![CDATA[var maxresults=6;var randomTitles=new Array();var randomTitlesNum=0;var randomUrls=new Array();var thumburl=new Array();function random_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];randomTitles[randomTitlesNum]=entry.title.$t;try{thumburl[randomTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[randomTitlesNum]=d.replace(/.*?:\/\//g, "//")}else thumburl[randomTitlesNum]='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC'}if(randomTitles[randomTitlesNum].length>300)randomTitles[randomTitlesNum]=randomTitles[randomTitlesNum].substring(0,300)+"";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){randomUrls[randomTitlesNum]=entry.link[k].href;randomTitlesNum++}}}}function printRandomLabels_thumbs(){var r=Math.floor((randomTitles.length-1)*Math.random());var i=0;if(randomTitles.length>0)document.write('<div class="random_items"/>');while(i<randomTitles.length&&i<20&&i<maxresults){document.write('<div class="random_item"><a class="url_item');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+randomUrls[r]+'" title="'+randomTitles[r]+'"><img class="img_item lazyload" alt="'+randomTitles[r]+'" width="16" data-src="'+thumburl[r]+'" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=" title="'+randomTitles[r]+'" height="9" loading="lazy"/><div class="clear"></div><div class="title_item">'+randomTitles[r]+'</div></a></div>');if(r<randomTitles.length-1){r++}else{r=0}i++}document.write('<div class="clear"></div></div>');randomUrls.splice(0,randomUrls.length);thumburl.splice(0,thumburl.length);randomTitles.splice(0,randomTitles.length)}var script=document.createElement('script');script.setAttribute('src', '/feeds/posts/default?alt=json-in-script&orderby=updated&callback=random_results_labels_thumbs&max-results=9999');document.write(script.outerHTML);//]]></script><script>printRandomLabels_thumbs();</script></div>
Lưu ý: maxresults=6 là số lượng bài viết hiển thị
Tiện ích bài đăng ngẫu nhiên phía trên hỗ trợ lazyload cho hình ảnh từ lazysizes.js, Nếu blog của bạn không sử dụng hình ảnh lazyload, vui lòng thay thế mã hình ảnh được đánh dấu bằng mã sau.
<img class="img_item" alt="'+randomTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+randomTitles[r]+'" height="9" loading="lazy"/>