Cara Membuat Widget Recent Post

Kalian pasti sudah tau apa itu Recent Post, jadi sepertinya saya tidak perlu lagi untuk menjelaskan ke kalian,

Jadi langsung saja ke inti dari postingan kali ini, yatu Menambahkan Widget Recent Post pada Blog,

Recent Post ini Sepenuhnya menggunakan Script, Bukan Menggunakan Deafult dari blognya

pertama, Login ke blogger kalian, pilih Tata Letak/Layout > Add Gadget > Pilih HTML/JavaScript
tambahkan Script dibawah ini.

<style scoped='' type='text/css'>
ul.recent_posts_arlina{padding:0;background:#54a5db;counter-reset:popcount}
ul.recent_posts_arlina li{color:#fff;margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
ul.recent_posts_arlina li:hover{background:rgba(0,0,0,0.06)}
ul.recent_posts_arlina li i{display:none;font-style:normal}
ul.recent_posts_arlina li:last-child{border-bottom:none}
ul.recent_posts_arlina li .item-titlex{display:inline-block;color:#fff;padding:0 10px 0 0;font-weight:700}
ul.recent_posts_arlina li .item-titlex a{color:#fff;padding:0 10px 0 0;font-size:14px;}
ul.recent_posts_arlina li img{display:none;width:300px;height:auto;}
ul.recent_posts_arlina li:first-child{border-bottom:none;padding:0}
ul.recent_posts_arlina li:first-child img{margin:0;width:100%;height:180px;overflow:hidden;display:block}
ul.recent_posts_arlina li:first-child .wrapinfo{margin:0;width:100%;height:180px;overflow:hidden;display:inline-block}
ul.recent_posts_arlina li:first-child .item-titlex{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
ul.recent_posts_arlina li:hover:first-child .item-titlex{background:rgba(44,62,80,1);transform:translate(0,0)}
ul.recent_posts_arlina li:first-child .item-titlex a{font-size:15px;color:#fff}
ul.recent_posts_arlina li .item-titlex:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
ul.recent_posts_arlina li:first-child i{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
ul.recent_posts_arlina li:first-child i:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
ul.recent_posts_arlina li:hover:first-child i{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
ul.recent_posts_arlina li:first-child .item-titlex:before{top:25%}
ul.recent_posts_arlina li:first-child .item-titlex:before{color:#fff}
ul.recent_posts_arlina li:last-child .item-titlex:before{left:3%}
ul.recent_posts_arlina li:hover .item-titlex:before{color:rgba(255,255,255,1)}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/redvision/6b5256a3/terbarulagi.js'></script>
<script style='text/javascript'>
var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!0,numchars=130;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

dan beri Judul sesuai yang kalian ingin, dan Klik Simpan/Save

Untuk CSSnya bisa kalian edit sesuka kalian,
Recent Post ini yang punya adalah ( Nama tertera pada Script ),

Untuk menegit jumlah tampilan Postnya, edit pada JavaScriptnya,
Saya belum mencoba, tapi di JSnya akan ada tulisan menunjukkan tandanya, lihat ada Script seperti dibawah ini,

var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!0,numchars=130;

kalian bisa mencoba untuk mengubahnya, sesuai yang kalian inginkan,
saya tidak menjamin itu akan berubah, karna itu hanya pendapat saya saja, dan saya juga belum mencobanya,
jika orang yang sering Coding, pastinya dia akan tahu,
Jika kalian masih kebingungan dengan postingan saya, berikan komentar kalian sesuai topik.

untuk demonya bisa kalian lihat pada Template ini. Namun, jika suatu saat saya mengganti template, kalian bisa melihat Demonya dibawah ini. Klik Demo

DEMO