Ditulis oleh: Ditulis pada: 8/23/2021
Random Posts Blogger Support HTML5, HTTPS, dan Gambar Pihak Ketiga - Beberapa hari yang lalu saya sudah membagikan widget related posts Blogger yang support HTML5, HTTPS, dan gambar yang dihosting di pihak ketiga. Dan hari ini, saya akan share widget random post yang juga support HTML5, HTTPS, dan gambar yang dihosting di pihak ketiga seperti halnya related post.
Random posts ini saya modif dari kode widget related posts sebelumnya, yang menampilkan beberapa postingan secara acak dari semua artikel blog dengan tampilan grid 2 kolom.
Jadi widget ini juga mendukung gambar postingan dari hosting pihak ketiga seperti imgur dan lainnya dan saya buat menjadi lebih simple dari kode related posts.
Untuk demonya, bisa dilihat di blog Nulis Info pada widget Pilihan Editor di sidebar.
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya berikut ini.
Silahkan copy kode CSS berikut ini dan simpan di style blog Anda.
#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;}Kemudian simpan kode berikut di sidebar pada widget Javascript/HTML.
<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>Perhatikan angka 6 yang ditandai, itu untuk mengatur jumlah post yang tampil pada widget random posts ini.
Widget random post di atas support lazyload untuk image dari lazysizes.js, Jika blog Anda tidak menggunakan lazyload image, silahkan ganti kode image-nya yang ditandai dengan kode berikut ini.
<img class="img_item" alt="'+randomTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+randomTitles[r]+'" height="9" loading="lazy"/>
Bagaimana, mudah bukan?
Jika ada yang kurang mengerti, bisa kita diskusikan di kolom komentar.