How to Make Random Blogger Posts that Support HTML5

Table of Contents

In this article, I will share how to make Random blogger posts that support HTML5, HTTPS and Images hosted by third parties, such as related posts.

I modified the random posts in this article a little from the previous related posts widget code, which displays several random posts from all blog articles with a 2-column grid view.

This widget also supports post images from third party hosting such as imgur and others and is made simpler than the related posts code. If you want to try please follow the steps below.

1. Copy the CSS code below and save it in the style section of your blog.

#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;}

2. Then save the following code in the sidebar of the JavaScript/HTML widget.

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

The 6 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 does not 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"/>

That's how to make random blogger posts support HTML5, HTTPS and third party images.