Cara Membuat Horizontal Random Post Widget di Blogger

 

1. Click Add a Gadget Link HTML /JavaScript

2. Copy dan Paste kode berikut di dalamnya

 
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> 
#random-posts li{width: 18%;
    float: left;
    margin: 1%;
    position: relative;
    display: grid;
    padding: 0 !important;
    border-radius: 8px;
    box-sizing: border-box;
    background: #fff;
    min-height: 303px;} 
#random-posts li:last-child{margin-right:0} 
#random-posts li img{display: block;
    width: 100%;
    max-width: 100%;
    height: 200px;
    border: 0;
    outline: 0;
    position: relative;
    margin: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;}
#random-posts li .isidakota h5 {color: #202124;padding: 10px;display: block;object-fit: cover}
#random-posts li:last-child .isidakota{right:0} 
#random-posts li:hover .isidakota{color:#1a73e8}
.isidakota p{display: none} 
</style> <span class="glap"> <ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 5; var rdp_snippet_length = 0; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQhJWQ2Dhoq81PotPKUYNncODahTfo4kcAF-98eO4DEXXkiV1WZkHUlY8q_WReMJ67e1HlGNngcyFO35DfvyGaxP9yW5GSrrEXrNHNNud8f3sECqZbBaxxktX2MPkcrzJ4p4_suetwCU/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isidakota"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script> </ul></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script> </b:if>
 

3. Preview dan Save

Ubah css sesuai kemauan

preview example

Ganti * var rdp_numposts = 5 (sesuai jumlah postingan yang diiginkan)