Teuku.net - Surely every blog will be better if there is a Random Post Widget that is valid HTML5 and supports HTTPS right? well, today I want to share a guide on how to make a random post that I said before.
what are the steps, please follow the method below :
↪️ Please Copy-Paste the CSS code below and save it in the Style/Skin that is in your template
#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;}{codeBox}
↪️ Then save the following code in the sidebar of the Javascript/HTML widget
<div id='randomposts'>
<script>
//<![CDATA[
var maxresults=4;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>{codeBox}
Pay attention to the number 4 marked, that's to set the number of posts that appear on this random posts widget.
The random post widget above supports lazyload for images from lazysizes.js, If your blog doesn't use lazyload images, please replace the image code marked with the following code.
<img class="img_item" alt="'+randomTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+randomTitles[r]+'" height="9" loading="lazy"/>{codeBox}
So, that's the guide on how to make a valid HTML5 and HTTPS random post widget, easy right? If anyone doesn't understand, we can discuss it in the comments column.
