Random Post dengan Thumbnail di Blogger Tampilan Keren dan Ringan

Cara membuat dan memasang script random post untuk memunculkan artikel dan postingan secara acak di Blogger (Blogspot) dengan tampilan yang menarik, keren, ringan, minimalis, simple, bagus, dan responsif.
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4R75J06lBN_covairhAkf_OkBd7v_1SYybQytrPEUhuaWQOlT_SUO8NK1gHXvNpHu5K_UXylp4i8B4YJAd2dRpk2uff3zdwtR3Qu_hyp6hB0es-k7-XaH3V5zd3VEXfJujkPHlE5fzTmz/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.

31
Random Post dengan Thumbnail di Blogger Tampilan Keren dan Ringan
Random Post dengan Thumbnail di Blogger Tampilan Keren dan Ringan
Cara membuat dan memasang script random post untuk memunculkan artikel dan postingan secara acak di Blogger (Blogspot) dengan tampilan yang menarik, keren, ringan, minimalis, simple, bagus, dan responsif.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

31 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Gigend Workspace
    20 November, 2021
    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 Agustus, 2021
    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
    07 Agustus, 2021
    Profil: https://www.blogger.com/profile/03293115865687071683
    Imagenya kok terpotong/beda dengan source image post
  • Djefi Febian
    22 Februari, 2021
    Profil: https://www.blogger.com/profile/01677557629330387247
    Mba, cara agar thumbnailnya jadi horizontalnya gimana?
  • warung sehat bhinneka
    22 Februari, 2021
    Profil: https://www.blogger.com/profile/15240837650515543214
    Terimakasih..
  • Riizhu
    20 November, 2020
    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?
  • Ely Goro Leba
    03 Juli, 2020
    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 Juli, 2021
      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 Juni, 2020
    Profil: https://www.blogger.com/profile/04267693622002160483
    kalau recent post by label gimana mbak?
  • BELIDE MS
    20 April, 2020
    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 April, 2020
    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.
  • Ely Goro Leba
    27 Maret, 2020
    Profil: https://www.blogger.com/profile/05275401473347868294
    cara setting gambar yang noimage gmana gan?
  • Ohara
    27 Februari, 2020
    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 Desember, 2019
    Profil: https://www.blogger.com/profile/11759718745299492373
    kalau tanpa gambar kodenya gimana ya mbak?
  • Moch Alvinno Saputra
    24 September, 2019
    Profil: https://www.blogger.com/profile/00350415779210364615
    ini yang saya cari , terimakasih banyak !
  • Unknown
    15 September, 2019
    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
    07 September, 2019
    Profil: https://www.blogger.com/profile/04463551983920122592
    kelebihannya apa
  • StarPurnama™
    02 Agustus, 2019
    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 Juli, 2019
    Profil: https://www.blogger.com/profile/08250299194556004687
    ijin praktek mbak
  • Cimploh.blogspot.com
    30 April, 2019
    Profil: https://www.blogger.com/profile/01048248304710908223
    Gan klo Tumbnail nya aja gimana.. Tanpa pake tulisan
    • Syahrul
      27 Mei, 2019
      Profil: https://www.blogger.com/profile/15976741855497664764
      Edit Sendiri gan
      //pastebin.com/raw/KDRi0dKb
  • Rafi
    09 April, 2019
    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 April, 2019
      Profil: https://www.blogger.com/profile/08181588658968702674
      sudah bisa kak. loading nya cepat sekali. (y)
  • Anonim
    Anonim24 Maret, 2019
    udah diganti link gambar no image kok ngga berubah yaa gan?
  • TW
    30 Desember, 2018
    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 November, 2018
    Profil: https://www.blogger.com/profile/10488370808760218797
    Caranya agar sesuai label gimana?
    • Igniel
      27 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Random post by label belum ada tutornya. Ditunggu saja bentar lagi.
  • Lenktech
    23 November, 2018
    Profil: https://www.blogger.com/profile/07539328913513343621
    Keren mbak, udah ak terapkan diblog makasih . . .
  • Admin
    12 November, 2018
    Profil: https://www.blogger.com/profile/09514865497601513651
    Untuk merubah warna backgroundnya bgmn caranya mbak? Trm ksh
    • Igniel
      12 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      #ignielRandom {background-color:#008c5f; padding:0px; margin:0px;}
      Ganti di bagian #008c5f
  • Wanjay
    06 November, 2018
    Profil: https://www.blogger.com/profile/14032211075180381343
    Mantap mbak