Ads

Update: Cara Membuat Random Post Simple Image Blogger

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

#rSI{list-style:none;margin:0;padding:0;overflow:hidden}
#rSI li{width:calc(25% - 5px);float:left;margin:0 5px 5px 0;padding-top:15%;position:relative;overflow:hidden}
#rSI li img{position:absolute;top:0;width:100%;height:100%;object-fit:cover}
#rSI 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){#rSI li{width:calc(50% - 5px)}}

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

<ul id="rSI">
  <script type='text/javascript'>/*<![CDATA[*/
    const rSI={cImage:function(t){let e=t,n=e.indexOf("<img"),a=e.indexOf('src="',n),i=e.indexOf('"',a+5),c=e.substr(a+5,i-a-5);return-1!=n&&-1!=a&&-1!=i&&""!=c?c:this.noImage},compile:function(t){if("entry"in t.feed){let e="";t.feed.entry.forEach(t=>{const n=t.title.$t,a=t.link.find(t=>"alternate"==t.rel).href,i="media$thumbnail"in t?t.media$thumbnail.url.match(/\/s[0-9]{2}-(w[0-9]+-)?c/)?t.media$thumbnail.url.replace(/\/s[0-9]{2}-(w[0-9]+-)?c/,"/w400-h225-p-k-no-nu"):t.media$thumbnail.url.replace(/\=s[0-9]{2}-(w[0-9]+-)?c/,"=w400-h225-p-k-no-nu"):"content"in t&&this.cImage(t.content.$t);e+=`<li><a href="${a}" title="${n}"><img src="${i}" alt="${n}"><span>${n}</span></a></li>`}),document.getElementById("rSI").innerHTML=e}},create:function(t){const e=document.createElement("script");e.src=t,document.body.appendChild(e)},getRandom:function(t){const e=Math.floor(Math.random()*(t.feed.openSearch$totalResults.$t-this.numb-1+1))+1;this.create(`/feeds/posts/default${0==this.cat?"":`/-/${this.cat}`}?alt=json-in-script&start-index=${e}&max-results=${this.numb}&callback=rSI.compile`)},noImage:"https://1.bp.blogspot.com/-BYDJ1dpFEhE/X9QnAUfeORI/AAAAAAAAHxw/OjfaqiPHjhAmCgJts39XIg7o4KR-8YtdACNcBGAsYHQ/w300-h225-p-k-no-nu/dagruel-no-image.png",run:function(t=10,e=!1){if(this.cat=e,this.numb=t,!document.getElementById("rSI"))return console.log("Error Not Function");this.create(`/feeds/posts/default${0==this.cat?"":`/-/${this.cat}`}?alt=json-in-script&max-results=0&callback=rSI.getRandom`)}};
    rSI.run(10);
  /*]]>*/</script>
</ul>

perhatikan kode yang di tandai itu adalah jumlah post yang akan di tampilkan. Jika kalian ingin mefilter random post ini dengan label tertentu maka pemanggil nya begini rSI.run(10, 'nama_label'). Ganti nama_label dengan label yang di ingin kan.

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.

23 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
    2. replace(/\/s[0-9]{2}-(w[0-9]+-)?c/, "s320")

      Hapus
    3. halo lagi bang, keknya script bagian image mesti di update lagi, karena blogger ganti host image penggunaan s320 gk bisa lagi.

      gambarnya jadi s72-c, sudah diubah-ubah gak ngaruh sama sekali

      Hapus
    4. coba ganti jadi gini.
      replace(/\=s[0-9]{2}-(w[0-9]+-)?c/, "s320")

      Hapus
    5. malah gak tampil sama sekali widgetnya min

      Hapus
    6. update, bisa min ditambah =, jadinya s320

      Hapus
    7. dan biar di tampilan mobile jadi 2 kolom aja bisa gak min?

      Hapus
    8. lupa kasih space di 5px nya, sama css di atas juga.
      @media screen and (max-width: 480px){#randPosx li{width:calc(50% - 5px)}}

      Hapus
    9. jadinya landscape min bukan portrait lagi, emang gitu ya?

      Hapus
    10. tambahkan padding-top: 44%;
      @media screen and (max-width: 480px){#randPosx li{width:calc(50% - 5px);padding-top:44%}}

      Hapus
    11. document.write() bisa di atasi gk min?

      Hapus
    12. berkurang 6% di gt metrix

      Hapus
  2. min bisa gak kalau itu dibuat menjadi custom dan tidak random dan bisa sesuai label bisa gak min

    BalasHapus
  3. Yang muncul postingan terbaru aja ya bang?
    Postingan lama ga pernah muncul

    BalasHapus
    Balasan
    1. Random kok. Klo gak muncul postingan lama. Mungkin post nya masih sedikit

      Hapus
  4. Yang terbaru gak tampil sama sekalii bang

    BalasHapus
    Balasan
    1. coba lagi, salah parser tadi.

      Hapus
    2. sip, makasih min sudah work dan gak ada masalah document.write lagi.

      btw ini bisa dipasang make lazy load image, bagi yang ingin pake silakan edit jadi gini:
      <img class="lazy" data-src="${i}" alt="${n}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=">

      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>
  • Gunakan Shortcode berikut untuk menambahkan gambar atau Video. Contoh:
    <i rel="spoiler image">url_gambar</i>
    <i rel="spoiler">spoiler_text</i>
    <i rel="iframe">url_embed</i>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!