Widget Random Post Dengan Thumbnail Yang Keren Di Blogger

Diposting pada

Widget Random Post Dengan Thumbnail Yang Keren Di Blogger

Widget Random Post Dengan Thumbnail Yang Keren Di Blogger – Pada masing-masing template tentu nya mempunyai ciri tampilan widget yang berbeda. Contoh nya seperti blog nya igniel.com yang pada bagian widget di sidebar terlihat menggunakan widget random post dengan thumbnail yang keren.

Mungkin dari kalian ada yang penasaran bagaimana sih cara membuat widget random post dengan thumbnail yang keren seperti blog nya mba igniel. Di artikel kali ini saya akan mencoba berbagi cara seperti yang sudah saya tuliskan pada judul di atas.

Sebelum kita mulai cara tutorial nya, saya akan jelaskan cara kerja widget random post ini. Seperti yang kalian ketahui kata dari random yaitu acak, jadi postingan yang akan tampil akan menampilkan postingan yang tidak tentu, bisa itu postingan popular, terbaru atau postingan yang sudah lama akan muncul kembali.

Widget ini menurut saya sangat cocok untuk mengangkat artikel yang sudah lama tidak terbaca oleh pengunjung dan dengan kita memasang widget ini artikel yang tenggelam bisa kembali terbaca oleh pengunjung.

Udah jelaskan bagaimana cara kerja nya? Sekarang kita mulai tutorial cara memasang widget nya di blog kalian masing-masing.

Baca Juga : Cara Membuat Widget Recent Post Ala Template Animag

Widget Random Post Dengan Thumbnail Yang Keren Di Blogger

Silahkan sobat copy kode CSS dibawah ini di atas kode </style> atau ]]></b:skin> pada template sobat.

/* 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)}

Selanjut nya silahkan sobat copy kode dibawah ini lalu letakan kode tersebut di sidebar blog. Cara kalian pergi ke menu layout/tata letak. Lalu tambahkan gadget dan pilih HTML/Javascript. Lihat pada contoh gambar dibawah ini.

Widget Random Post Dengan Thumbnail

Setelah itu masukan kode nya kedalam kolom widget HTML/Javascript tersebut.

Widget Random Post Dengan Thumbnail

<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>
var jumlah Jumlah random post yang akan di munculkan
var noimg URL dari gambar noimage. Jika artikel kalian tidak mempunyai gambar maka thumbnail akan menggantikan oleh gambar yang di tentukan sendiri oleh noimage.

Untuk contoh nya silahkan kalian lihat pada tombol demo dibawah ini.

DEMO

Kaya nya ini sudah akhir dari tutorial yang saya berikan untuk artikel kali ini. Semoga artikel yang telah saya berikan bisa bermanfaat bagi sobat Blogger. Selamat mencoba!

Script By Igniel.com

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *