24 C
id

Cara Membuat Random Post dengan Thumbnail di Blogger

Apa itu Random Post? Seperti judulnya random post merupakan postingan blog yang ditampilkan secara acak menggunakan kode script khusus. Biasanya random post terletak di widget blog/website dan dimuat berdasarkan acak atau random.

Artinya postingan 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.

Tampilan widget random post tersebut sudah dilengkapi dengan thumbnail post atau gambar postingan. Serta memiliki desain yang menarik dan keren. Berikut langkah-langkah pemasangannya bisa anda pelajari berikut ini.


Cara Membuat Random Post dengan Thumbnail Untuk Blogger

1. Buka blogger.com, lalu klik menu Tema > Edit HTML.

2. Tambahkan kode CSS ini diatas </style> atau ]]></b:skin>. Kamu bisa edit lagi kodenya agar sesuai dengan template blog, terutama di bagian warna background. Tampilannya sudah responsif dan menarik untuk mempercantik blog.

 

/* Random Post Thumbnail by ilmuinternet.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)}

3. Selanjutnya copy paste dan letakkan kode berikut pada sidebar blog. Caranya pergi ke menu Layout (Tata Letak) > Add a Gadget (Tambahkan Gadget) > pilih HTML/Javascript

  • Kemudian simpan dan lihat hasilnya.



<div id='ignielRandom'></div>
<script> //<![CDATA[
// Random Post Thumbnail by ilmuinternet.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>

Penjelasannya:

  • 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.


Demikian postingan cara membuat widget random post di blogger yang dapat anda gunakan. Semoga bermanfaat dan menambah wawasan anda di dunia blogging. Salam, Blogger Indonesia

Postingan Lama
Postingan Lebih Baru

Posting Komentar

Ads Single Post 4