Ads

Random Post Simple Image

Random Post Simple Image
Dagruel

Sebelum nya ada yang request untuk mengubah script dari postingan Recent Post Ost Simple [PART 3] punya "ArlethDesign" menjadi random post.

Dan inilah hasil nya. silahkan di coba bagi yang telah request.

1. Masuk ke dalam template dan pasang css berikut di atas tag ]]></b:skin> atau </style>, Kemudian simpan template

#randPosx{list-style:none;margin:0;padding:0;overflow:hidden}
#randPosx li{width:calc(25% - 5px);float:left;margin:0 5px 5px 0;padding-top:15%;position:relative;overflow:hidden}
#randPosx li img{position:absolute;top:0;width:100%;height:100%;object-fit:cover}
#randPosx li span{position:absolute;bottom:0;right:0;left:0;color:#FFF;font-size:12px;line-height:normal;padding:6px;background:linear-gradient(to bottom, rgba(0, 0, 0, .05) 6%, rgba(0, 0, 0, .85) 70%)}
@media screen and (max-width: 680px){#randPosx li{width:calc(50% -5px)}}

2. Buka "Tata Letak" dan tambahakan Widget HTML/JAVASCRIPT. Dan letakkan HTML dan Script berikut kedalam nya.

<ul id="randPosx">
  <script type='text/javascript'>
    //<![CDATA[
    var randContent = 5;
    var randLabel = "NamaLabel";
    var randSite = "https://seleseven-v2.blogspot.com/";
    var randID = "randPosx";
    function getRandomInt(t,e){return Math.floor(Math.random()*(e-t+1))+t}function shuffleArray(t){var e,n,r=t.length;if(0===r)return!1;for(;--r;)e=Math.floor(Math.random()*(r+1)),n=t[r],t[r]=t[e],t[e]=n;return t}function randPosx(t){var e=getRandomInt(1,t.feed.openSearch$totalResults.$t-randContent);"undefined"!=typeof randLabel?document.write('<script src="'+randSite+"/feeds/posts/default/-/"+randLabel+"?alt=json-in-script&start-index="+e+"&max-results="+randContent+'&callback=rePosx"><\/script>'):document.write('<script src="'+randSite+"/feeds/posts/default?alt=json-in-script&start-index="+e+"&max-results="+randContent+'&callback=rePosx"><\/script>')}function rePosx(t){for(var e,n,r,i=document.getElementById(randID),l=shuffleArray(t.feed.entry),o="",f=0,u=l.length;f<u;f++){for(var p=0,m=l[f].link.length;p<m;p++)e="alternate"==l[f].link[p].rel?l[f].link[p].href:"#",r=l[f].title.$t,"media$thumbnail"in l[f]?n=l[f].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/,""):l[f].content.$t.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)?(s=l[f].content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(n=d)):n="https://1.bp.blogspot.com/-BYDJ1dpFEhE/X9QnAUfeORI/AAAAAAAAHxw/OjfaqiPHjhAmCgJts39XIg7o4KR-8YtdACNcBGAsYHQ/w300-h225-p-k-no-nu/dagruel-no-image.png";o+='<li><a href="'+e+'" title="'+r+'">'+('<img src="'+n+'"/>')+"<span>"+r+"</span></a></li>"}i.innerHTML=o}"undefined"!=typeof randLabel?document.write('<script src="'+randSite+"/feeds/posts/default/-/"+randLabel+'?alt=json-in-script&max-results=0&callback=randPosx"><\/script>'):document.write('<script src="'+randSite+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=randPosx"><\/script>');
    //]]>
  </script>
</ul>
Perhatikan Code yang ditandai
  • randContent = Jumlah Post Yang di tampilkan.
  • randLabel = menampilkan post sesuai label tertentu. jika ingin semua post silahkan hapus.
  • randSite = url blog.

Kemudian Simpan dan lihat hasil nya. jika berhasil selamat dan jika tidak silahkan coret-coret kolom komentar di bawah.

Dan jika ada yang ingin request silahkan tambahkan komentar di sini, untuk pengerjaan request nya akan saya kerjakan di hari sabtu/minggu. Sampai jumpa minggu depan.

2 komentar

Blogger Disqus
  1. 1. Bisa ditambahin class lazyload gak ya min? kalo bisa dipasang dimana?
    2. Source img nya dikecilin ke s320/s240 bisa gak? bikin loading jadi lama karena make ukuran asli

    thanks before

    BalasHapus
    Balasan
    1. Cari ini di script nya lalu tambahkan s320 atau s240 di dalam kutip 2https://1.bp.blogspot.com/-pixPQmXdMbA/YSpCSUm0dcI/AAAAAAAAALM/Kb0Y7McE15cqxRpmwYtwDeSR0uB2Iav9gCLcBGAsYHQ/s0/Screenshot_20210828-220125_Chrome.jpg

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!