Random Post dengan Thumbnail di Blogger Tampilan Keren dan Ringan

Cara Memasang Script Random Posts dengan Thumbnail di Blogspot

Jika di artikel sebelumnya dijelaskan tentang cara membuat related post, maka kali ini adalah tutorial untuk membuat random post. Dari judulnya saja sudah jelas bahwa postingan akan dimunculkan secara acak, bukan berdasarkan label atau kategori terkait.

Random post yang muncul bisa saja adalah yang terpopuler, terlama, atau terbaru. Ini bagus untuk mengangkat kembali postingan yang sudah sangat lama diterbitkan agar tidak tenggelam dan bisa dibaca oleh pengunjung.

Cara Membuat Random Post dengan Gambar Untuk Blogger

PERTAMA. Simpan kode CSS ini "DI ATAS" </style> atau ]]></b:skin>. Kamu bisa edit lagi agar sesuai dengan template blog, terutama di bagian warna background. Tampilannya sudah responsif dan menarik untuk mempercantik blog.
/* Random Post Thumbnail by igniel.com */
#ignielRandom {background-color:#008c5f; padding:0px; margin:0px;}
#ignielRandom ul {padding:0px; margin:0px;}
#ignielRandom ul li {margin:0; padding:15px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3); transition: all .3s ease;}
#ignielRandom ul li:last-child {border-bottom:none}
#ignielRandom ul li .judul {padding:0 10px 0 0}
#ignielRandom ul li:hover {background-color:rgba(0,0,0,.25)}
#ignielRandom ul li a {font-size:13px; color:#fff; line-height:16px;}
#ignielRandom ul li .thumbnail {width:100px; float:left; margin-right:10px; line-height:0px;}
#ignielRandom ul li img {width:100%; max-width:100%; height: auto;}
#ignielRandom ul li:first-child {border-bottom:none; padding:0px;}
#ignielRandom ul li:first-child .thumbnail {width: 100%; display:block; margin:0px;}
#ignielRandom ul li:first-child .judul {background-color:rgba(29, 33, 41, .6); width:100%; text-align:center; padding:15px; position:absolute; bottom:0px; transition: all .3s ease;}
#ignielRandom ul li:first-child a {font-size:16px; line-height:22px; transition: all .0s ease;}
#ignielRandom ul li:first-child a:hover {font-size:20px; line-height:28px;}
#ignielRandom ul li:first-child a:hover .judul {background-color:rgba(29, 33, 41, 1)}

KEDUA. Letakkan kode ini di sidebar blog. Caranya pergi ke menu Layout (Tata Letak) » Add a Gadget (Tambahkan Gadget) » pilih HTML/Javascript.
<div id='ignielRandom'></div>
<script> //<![CDATA[
// Random Post Thumbnail by igniel.com
var jumlah = 6;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u a=["\\e\\v\\f\\e\\d\\j\\A\\g\\f\\o\\i\\m","\\h\\g\\f\\o\\i\\m","\\x\\j\\i\\i\\h","\\j\\d\\f\\v\\b\\K","\\L\\b","\\i\\q\\d\\f\\16\\d\\g\\h\\k\\K\\L\\b\\i\\b\\g\\j\\A\\d\\c\\y\\j\\b\\c","\\x\\d\\d\\o","\\I\\c\\k\\h","\\e\\q\\b\\1b\\c\\h\\k\\p\\O","\\i\\h\\e\\v\\e\\f","\\j\\i\\k\\g\\b\\e\\i\\f","\\s\\x\\d\\d\\o\\c\\s\\q\\i\\c\\b\\c\\s\\c\\y\\m\\m\\g\\h\\Z\\R\\g\\j\\b\\p\\Q\\c\\i\\f\\r\\e\\f\\r\\c\\k\\h\\e\\q\\b\\z\\c\\b\\g\\h\\b\\r\\e\\f\\o\\d\\M\\p","\\z\\m\\g\\M\\r\\h\\d\\c\\y\\j\\b\\c\\p","\\z\\k\\g\\j\\j\\V\\g\\k\\W\\p\\e\\v\\f\\e\\d\\j\\A\\g\\f\\o\\i\\m\\O\\G\\I\\s\\c\\k\\h","\\e\\q\\b\\G","\\17\\h\\e\\b\\d"];u 18=a[0];C H(B,P){E t[a[2]](t[a[1]]()*(P-B+1))+B}C 1a(l){u n=l[a[3]],w,D;X(n===0){E T};19(--n){w=t[a[2]](t[a[1]]()*(n+1));D=l[n];l[n]=l[w];l[w]=D};E l}C U(F){u J=H(1,(F[a[6]][a[5]][a[4]]-N));S[a[15]](a[7]+a[8]+Y[a[10]][a[9]]+a[11]+J+a[12]+N+a[13]+a[14])}',62,74,'||||||||||_0xc707|x74|x73|x65|x69|x6E|x61|x72|x6F|x6C|x63|_0xd1a0x6|x6D|_0xd1a0x7|x64|x3D|x70|x2D|x2F|Math|var|x67|_0xd1a0x8|x66|x75|x26|x52|_0xd1a0x3|function|_0xd1a0x9|return|_0xd1a0xb|x3E|getRandomInt|x3C|_0xd1a0xc|x68|x24|x78|jumlah|x22|_0xd1a0x4|x6A|x3F|document|falplse|randomPost|x62|x6B|if|window|x79|||||||x53|x77|containerId|while|shuffleArray|x20'.split('|'),0,{}));
function ignielRandom(json) {
  var noimg = 'https://4.bp.blogspot.com/-Mpgs0kSln2I/WnRcTqvlOII/AAAAAAAAFh4/VTrxpLBIC7oxQi6xs2t6z0W2sV2h_zSiwCLcBGAs/w300-h225-p-k-no-nu/ignielcom-no-image.png';
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('K a=["\\C\\d\\g\\1G\\b\\d\\B\\d\\f\\g\\T\\Z\\I\\v","\\d\\f\\g\\q\\Z","\\U\\d\\d\\v","\\p\\x\\b\\o","\\b\\d\\f\\C\\g\\r","\\b\\e\\f\\N","\\q\\d\\b","\\l\\b\\g\\d\\q\\f\\l\\g\\d","\\r\\q\\d\\U","\\1L","\\1f\\g","\\g\\e\\g\\b\\d","\\B\\d\\v\\e\\l\\1f\\g\\r\\x\\B\\L\\f\\l\\e\\b","\\h\\S\\1g\\F\\F\\n\\r\\A\\A\\X\\n\\u\\n\\N\\n\\f\\y\\n\\f\\x","\\q\\d\\u\\b\\l\\t\\d","\\x\\q\\b","\\r\\g\\g\\u\\m\\1I\\h\\h\\1e\\M\\L\\u\\M\\L\\b\\y\\C\\m\\u\\y\\g\\M\\t\\y\\B\\h\\n\\1h\\u\\C\\m\\F\\N\\1a\\b\\f\\A\\I\\h\\1b\\f\\1H\\t\\V\\1z\\G\\b\\1B\\I\\I\\h\\w\\w\\w\\w\\w\\w\\w\\w\\1y\\r\\1e\\h\\Y\\V\\q\\P\\u\\Q\\T\\I\\1d\\1w\\y\\P\\1x\\e\\1c\\P\\m\\A\\g\\1c\\W\\F\\1b\\A\\m\\Y\\A\\r\\1r\\W\\1a\\e\\S\\1d\\Q\\t\\T\\1s\\w\\m\\h\\S\\1g\\F\\F\\n\\r\\A\\A\\X\\n\\u\\n\\N\\n\\f\\y\\n\\f\\x\\h\\e\\C\\f\\e\\d\\b\\t\\y\\B\\n\\f\\y\\n\\e\\B\\l\\C\\d\\M\\u\\f\\C","\\p\\b\\e\\o\\p\\l\\E\\r\\q\\d\\U\\D\\k","\\k\\E\\g\\e\\g\\b\\d\\D\\k","\\k\\o\\p\\v\\e\\G\\E\\t\\b\\l\\m\\m\\D\\k\\g\\r\\x\\B\\L\\f\\l\\e\\b\\k\\o\\p\\e\\B\\C\\E\\m\\q\\t\\D\\k","\\k\\E\\l\\b\\g\\D\\k","\\k\\h\\o\\p\\h\\v\\e\\G\\o\\p\\v\\e\\G\\E\\t\\b\\l\\m\\m\\D\\k\\1J\\x\\v\\x\\b\\k\\o","\\p\\h\\v\\e\\G\\o\\p\\h\\l\\o\\p\\v\\e\\G\\E\\t\\b\\l\\m\\m\\D\\k\\t\\b\\d\\l\\q\\k\\h\\o\\p\\h\\b\\e\\o","\\e\\f\\f\\d\\q\\1v\\V\\1h\\Q","\\p\\h\\x\\b\\o"];K R,J,H,1i=1F[a[0]](1E),z=1C(1A[a[2]][a[1]]),O=a[3];1k(K i=0,1j=z[a[4]];i<1j;i++){1k(K j=0,1m=z[i][a[5]][a[4]];j<1m;j++){R=(z[i][a[5]][j][a[6]]==a[7])?z[i][a[5]][j][a[8]]:a[9];H=z[i][a[11]][a[10]];1p(a[12]1q z[i]){J=(z[i][a[12]][a[15]])[a[14]](/\\/s[0-9]+(\\-c)?/,a[13])}1t{J=1l;1l=a[16]}};O+=a[17]+R+a[18]+H+a[19]+J+a[1u]+H+a[18]+H+a[1n]+H+a[1o]};1i[a[1K]]=O+a[1D]',62,110,'||||||||||_0x6b15|x6C||x65|x69|x6E|x74|x2F|||x22|x61|x73|x2D|x3E|x3C|x72|x68||x63|x70|x64|x41|x75|x6F|entry|x32|x6D|x67|x3D|x20|x30|x76|title|x49|img|var|x62|x2E|x6B|skeleton|x78|x4C|link|x77|x42|x66|x54|x7A|x35|x56|x79|||||||||||x53|x57|x36|x43|x34|x24|x33|x4D|ct|len|for|noimg|jen|21|22|if|in|x5F|x47|else|20|x48|x37|x51|x46|x71|json|x4F|shuffleArray|24|containerId|document|x45|x52|x3A|x6A|23|x23'.split('|'),0,{}));
}
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('E a=["\\q\\7\\d\\9","\\b\\l\\8\\G\\7\\9\\d\\j\\r","\\c\\9\\b\\A\\b\\g","\\f\\c\\d\\e\\8\\b\\c\\g","\\i\\t\\k\\k\\n\\7\\i\\l\\c\\7\\8\\7\\i\\7\\o\\h\\h\\e\\9\\z\\w\\e\\f\\8\\j\\F\\7\\c\\g\\m\\b\\g\\m\\7\\d\\9\\b\\l\\8\\p\\h\\e\\x\\m\\9\\k\\7\\o\\f\\8\\7\\j\\v\\p\\d\\e\\f\\f\\y\\e\\d\\H\\j\\9\\e\\g\\n\\c\\h\\C\\c\\7\\8\\r\\s\\q\\i\\7\\d\\9","\\b\\l\\8\\s","\\B\\9\\b\\8\\k"];D[a[6]](a[0]+a[1]+u[a[3]][a[2]]+a[4]+a[5])',44,44,'|||||||x73|x74|x72|_0x51dd|x69|x6F|x63|x61|x6C|x6E|x6D|x2F|x3D|x65|x70|x2D|x64|x75|x26|x3C|x22|x3E|x66|window|x30|x3F|x78|x62|x79|x67|x77|x50|document|var|x6A|x20|x6B'.split('|'),0,{}));
//]]> </script>

PENGATURAN
VariableKeterangan
var jumlah Jumlah random post yang ingin dimunculkan.
var noimg URL dari gambar noimage. Jika artikel tidak mempunyai gambar maka thumbnail akan digantikan oleh gambar yang ditentukan sediri melalui noimage ini.

Artikel Terkait

31 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Gigend Workspace
    20/11/21
    Profil: https://www.blogger.com/profile/02915567621247226126
    cara biar bisa pakai thumbnail dari link eksternal & first image dari post gimana ya mbak? mohon dibantu dong gak begitu paham javascript.
  • EstJava
    12/8/21
    Profil: https://www.blogger.com/profile/03293115865687071683
    bagus sih tapi bagian imagenya ngak bisa di edit pake css

    sebelum pake js ini:
    https://1.bp.blogspot.com/-ci7u8ASLSu4/YQvgda7DDKI/AAAAAAAAJEk/7A6Qp_zGaNMunZcL1ufcE9EK6YTmNzfnwCNcBGAsYHQ/237032l.webp

    sesudah pakai js:
    https://1.bp.blogspot.com/-ci7u8ASLSu4/YQvgda7DDKI/AAAAAAAAJEk/7A6Qp_zGaNMunZcL1ufcE9EK6YTmNzfnwCNcBGAsYHQ/w300-h225-p-k-no-nu/237032l.webp

    cara ilangin w300-h225-p-k-no-nu gmana yah, soalnya ngak sesuai keinginan
    my blog : cyberscanslation.blogspot.com
  • EstJava
    7/8/21
    Profil: https://www.blogger.com/profile/03293115865687071683
    Imagenya kok terpotong/beda dengan source image post
  • Toko Buku Bekas Aksiku
    22/2/21
    Profil: https://www.blogger.com/profile/01677557629330387247
    Mba, cara agar thumbnailnya jadi horizontalnya gimana?
  • warung sehat bhinneka
    22/2/21
    Profil: https://www.blogger.com/profile/15240837650515543214
    Terimakasih..
  • Riizhu
    20/11/20
    Profil: https://www.blogger.com/profile/03756997753867283305
    kok aneh banget ya, gak bisa diutak atik. mau ngepasing margin paddingnya dan ukuran gambarnya tapi setelah disave balik ke awal trus. Pas mau ganti noimagenya juga gak work. Tetap gambar logo igniel. Ada solusi?
  • Pegiat Literasi.com
    3/7/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    saya ganti var noimagenya..gak bisa..tetap munul gmbar igniel..
    padahal uda saya setting dimensi (300x225) dan formatnya (png) sama persis dengan gambar nya mbak igniel..
    ada solusi gak>?
    • Suara Dalam Kepalaku
      19/7/21
      Profil: https://www.blogger.com/profile/00840667874076654242
      Di dalam script nya ada thumbnail no-image nya igniel juga. Kalau mau ganti minta ijin yang punya karena script nya sudah di encode.
  • XizuMe
    23/6/20
    Profil: https://www.blogger.com/profile/04267693622002160483
    kalau recent post by label gimana mbak?
  • BELIDE MS
    20/4/20
    Profil: https://www.blogger.com/profile/11781309192123757061
    mbak mau nanya dong, gimana cara hilangkan thimbnail bawaan script tersebut?
    soalnya sudah saya ganti tetap gak berubah walau sudah saya ganti
  • Kang Fajar
    19/4/20
    Profil: https://www.blogger.com/profile/01612262317770494666
    Cara agar gambar yg kecil2 itu ga muncul gmn? Jd yg paling atas tetep munucl, yg lain dibawahnya g usah dimunculin gambarnya.
  • Pegiat Literasi.com
    27/3/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    cara setting gambar yang noimage gmana gan?
  • Onichwans
    27/2/20
    Profil: https://www.blogger.com/profile/13394770560725316177
    Kak itu Scrip di atas bisa di tambah Class='lazy' ngak, soalnya cuma ada atribut alt+title doank, aku pingin kasi class lazyload biar makin keren apa bisa mbak.
  • Kanal Lirik
    18/12/19
    Profil: https://www.blogger.com/profile/11759718745299492373
    kalau tanpa gambar kodenya gimana ya mbak?
  • Moch Alvinno Saputra
    24/9/19
    Profil: https://www.blogger.com/profile/00350415779210364615
    ini yang saya cari , terimakasih banyak !
  • Unknown
    15/9/19
    Profil: https://www.blogger.com/profile/17163696379316304195
    Mantaplah...ini yang terbaik ku dapat widgetnya..
    Soalnya yang lain bisa... Tpi pas mau edit tema sering error.. kalau yang ini nggak...
    Makasih min..

    Bagi yang mau lebih bagus widgetnya supaya bisa di scroll.. tambahin ..
    <'#' style="overflow:auto; width:ancho; height:550px;">
    Taruh di atas atau sebelum Java script html ignel di atas...
    Tanda pagar di ganti dengan 'div'
    Kalau mau liat contohnya liat aja blogku..
    https://www.fathesshopmod.id/

  • M.Ilham
    7/9/19
    Profil: https://www.blogger.com/profile/04463551983920122592
    kelebihannya apa
  • StarPurnama™
    2/8/19
    Profil: https://www.blogger.com/profile/07244258562756928056
    mba, kalau membuat artikel terkait menggunakan iklan matched conten kayak template igniel ini gimana mba
  • admin GTI
    15/7/19
    Profil: https://www.blogger.com/profile/08250299194556004687
    ijin praktek mbak
  • Cimploh.blogspot.com
    30/4/19
    Profil: https://www.blogger.com/profile/01048248304710908223
    Gan klo Tumbnail nya aja gimana.. Tanpa pake tulisan
    • Syahrul
      27/5/19
      Profil: https://www.blogger.com/profile/15976741855497664764
      Edit Sendiri gan
      //pastebin.com/raw/KDRi0dKb
  • Rafi
    9/4/19
    Profil: https://www.blogger.com/profile/16661548576424459683
    kak kenapa tidak muncul kalau saya simpan bukan di sidebar? saya simpan di footer gak bisa. any solution?
    • Rich Ard
      10/4/19
      Profil: https://www.blogger.com/profile/08181588658968702674
      sudah bisa kak. loading nya cepat sekali. (y)
  • jangguik
    24/3/19
    Profil: https://www.blogger.com/profile/09315439374480328782
    udah diganti link gambar no image kok ngga berubah yaa gan?
  • TW
    30/12/18
    Profil: https://www.blogger.com/profile/02453804335837462635
    kalau dipasang lebih dari 1 widget misalnya dipasang 3 gitu kok yang muncul cuman 1 aja kenapa ya mbak ?
  • Dwi Karin Pratiwi
    26/11/18
    Profil: https://www.blogger.com/profile/10488370808760218797
    Caranya agar sesuai label gimana?
    • Igniel
      27/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Random post by label belum ada tutornya. Ditunggu saja bentar lagi.
  • LENK TECH
    23/11/18
    Profil: https://www.blogger.com/profile/07539328913513343621
    Keren mbak, udah ak terapkan diblog makasih . . .
  • Admin
    12/11/18
    Profil: https://www.blogger.com/profile/09514865497601513651
    Untuk merubah warna backgroundnya bgmn caranya mbak? Trm ksh
    • Igniel
      12/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      #ignielRandom {background-color:#008c5f; padding:0px; margin:0px;}
      Ganti di bagian #008c5f
  • Wanjay
    6/11/18
    Profil: https://www.blogger.com/profile/14032211075180381343
    Mantap mbak