Cara Membuat Recent Post Keren, Responsive dan Ringan di Blogspot

Recent post adalah widget pada samping blog yang menampilkan artikel, baik itu artikel popular, artikel random maupun artikel terbaru, rencent post biasanya di pasang di sidebar blog. dengan memasang recent post pengunjung dapat dimudahkan untuk melihat artikel terbaru, artikel popular maupun artikel random, recent post juga memberikan tampilan yang keren untuk blogspot.

Recent post adalah widget yang hampir sering di pasang di blog selain dari popular post, widget popular post dan recent post dapat memberikan informasi terbaru untuk pengunjung dan memberitahukan pengunjung untuk artikel – artikel menarik yang mungkin ingin di baca. Recent post juga mempengaruhi kecepatan blog, nah di sini saya akan memberikan widget recent post yang ringan dan responsive.

Baca Juga: Cara memasang Lazy Load Untuk Mempercepat Loading Blog

Dalam memasang widget recent post merupakan bukan pergara yang sulit, karena recent post blogger bawaan sudah meneyediakan dengan bantuan feed blog, nah pada artikel kali ini saya akan memberikan cara memasang recent post di sidebar yang simple dan mudah.

Membuat Recent Post Keren Dan Responsive di Sidebar Blog

Recent post mempengaruhi loading blog, kamu tinggal memilih sesuai dengan kebutuhan kamu dan berikut ini recent post yang responsive.

Recet Post Ringan, Fast Loading, Simple dan Resposive

Recent post ini sangat ringan Karen tidak memiliki gambar, dan tidak mempengaruhi loading blog, blog kamu akan tetap loadingnya cepat, berikut langkah langkah pemasanganya.

1. Login Ke Blog kamu

2. Silahkan kamu pilih “tata letak”

3. Pada sidebar, kamu pilih “Tambahkan Widget”

4. Pilih “Html dan JavaScript

5. Copy Paste kode di bawah ini pada kotak yang tersedia, kamu boleh memberikan judul boleh juga tidak, itu tidak akan berpengaruh gagalnya pemasangan recent post.

Keterangan:
http://www.bungkill.com: ganti dengan Url Blog kamu
numPosts = 5: Jumlah artikel yang akan di tampilkan di recent post blog kamu

Cara Membuat Recent Post "Random Post" keren dengan Dengan Thumbnail Gambar

Pada recent post yang kedua ini dilengkapi dengan gambar sehingga dapat menarik perhatian dari pengunjung untuk mengklik postingan pada artikel kamu.

Untuk Langkah pemasangan CSS-Nya, kamu harus login di akun blogger kamu dan masuk ke Tema => Edit Html, kemudian cari kode </style> atau ]]></b:skin> dengan menekan Cntrl +F, Kemudia Paste Kode CSS di bawah ini tepat di ATAS </style> atau ]]></b:skin> Kemudia Simpan Tema. Kode CSS di bawah ini guna untuk mempercantik tampilan recent post.

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

Pada langkah kedua, untuk pemasangan recent post di sidebar, caranya klik tata letak => tambah gadget => html/javascript. kemudian paste code di bawah ini pada kolom yang telah di sediakan.

<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/AVvXsEj-gznLwvhLlQnfbg7ltn7YTFarD_imDp-Y1xLThYUIun0XTVu0vKD2pnJKlmfVKZWJ8mAbdjwfRgeqnKAGYb-TroAJcP8c5I6oPltyeox-jnPGqHjfKME7JvOq5cG0Q5S-2vUpKwdt3f62/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>

Keterangan:
jumlah = 6; adalah jumlah artikel yang akan di tampilkan pada random post

Nah bagaimana cara membuat recent post keren mudah bukan, sekian dulu artikel ini semoga bermanfaat untuk kita semua.
Sumber https://www.bungkill.com/

Cara Membuat Recent Post Keren, Responsive dan Ringan di Blogspot

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel