Cara Menciptakan Widget Recent Post

Baca Juga

Kalian niscaya sudah tau apa itu Recent Post, jadi tampaknya aku tidak perlu lagi untuk menjelaskan ke kalian,

Makara pribadi saja ke inti dari postingan kali ini, yatu Menambahkan Widget Recent Post pada Blog,

Recent Post ini Sepenuhnya memakai 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 sanggup kalian edit sesuka kalian,
Recent Post ini yang punya ialah ( Nama tertera pada Script ),

Untuk menegit jumlah tampilan Postnya, edit pada JavaScriptnya,
Saya belum mencoba, tapi di JSnya akan ada goresan pena mengatakan tandanya, lihat ada Script ibarat dibawah ini,

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

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

untuk demonya sanggup kalian lihat pada Template ini. Namun, kalau suatu ketika aku mengganti template, kalian sanggup melihat Demonya dibawah ini. Klik Demo

DEMO