Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Cara Membuat Widget Post Random di Blogger beserta Gambar


Cara Membuat Widget Post Random di Blogger beserta Gambar - Jumpa kembali sobat blogger kali ini admin duniamu38.com akan berbagi tutorial seputar blogging, yaitu Cara membuat widget postingan random beserta gambar thumbnail di blogger dengan mudah. Adapun fungsi dari widget pos random ini adalah agar postingan-postingan yang sudah lama bisa dimunculkan kembali di widget pos ini, sehingga postingan blogger yang sudah sangat lampau dan terpendam bisa di ulas kembali oleh para pembaca / visitor.

Selain itu post random ini yaitu bisa jadi menampilkan postingan yang terpopuler, terbaru, maupun terlama sekalian. Widget ini sangat bagus untuk digunakan oleh para blogger yang mana fungsinya untuk mengangkat kembali postingan-postingan artikel kita yang sudah sangat tenggelam beberapa tahun lalu, sehingga dengan adanya widgetpos random ini bisa tebaca kembali oleh sobat semuanya.

Maka dari itu disini kita akan membuat cara sendiri dengan aman yaitu dengan cara memasang sedikit script css/html ke dalam template blogger kita dan nantinya akan kita pasang disebelah sidebar website atau samping artikel website sebelah kanan beserta gambar didalam postnya.

Cara Membuat Post Random beserta Gambar dengan Mudah

Berikut langkah-langkahnya untuk masang script pada blogger :

  1. Buka halaman blogger > Login ke Blogger
  2. Pilih menu Tema > Pilih edit html
  3. Cari kode </Style> atau ]]></b:skin> (Caranya dengan menekan tombol Ctrl + F)
  4. Copy code CSS di bawah ini dan letakkan di ATAS kode </head>


/* WIDGET POST RANDOM
#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)}

5. Langkah selanjutya klik Simpan, dan keluar dari tampilan template

langkah selanjutnya jika sudah semuanya kita akan pasang disebelah sidebar blog. Jika sudah silahkan sobat kembali ke Menu awal. Adapun cara untuk memasang scriptnya yaitu :

  1. Pilih  Menu Tata Letak / Layout
  2. Pilih Add a Gadget (Tambah Gadget)
  3. Selanjutnya Pilih HTML/Javascript
  4. Copy kode dibawah ini pastekan didalam HTML/Javascriptnya lalu Klik Simpan

<div id='ignielRandom'></div>
<script> //<![CDATA[
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/AVvXsEhz-h3Mi_G35VQKOadL5VUIULLzvBBogcf6WSPvOJDFuiSxUQOq7rRJFq3EDxVcVjfUkqZd0Hk5SG-xtRRz7SKzVudGLVVNGTMPN4_vfjMlCQBk6-BDPjQAzEconjg0w_QybItPZXD7EU0/s1600/Logo+duniamu38.com.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>

Catatan : Untuk Var jumlah warna merah bisa disesuaikan jumlah yang akan ditampilkan post random / artikel di widgetnya, selanjutnya untuk Var noimg yaitu untuk gambar defaultnya ketika artikel tidak ada gambar thumbnailnya/kosong bisa otomatis menjadi gambar yang dipasang default di link tersebut.
Oke sobat jadi caranya seperti itu mudah bukan? pastinya sangat mudah dan tidak asing lagi bagi kalian yang biasa mengutek utek blog seperti ini, silahkan mencobanya semoga berhasil.

Sumber widget post random : igniel.com 

Posting Komentar untuk "Cara Membuat Widget Post Random di Blogger beserta Gambar"