Halo sobat jagoan. Cara termudah untuk membuat widget recent post, atau yang biasa disebut dengan post post artikel terbaru. Nah dikesempatan ini admin akan membagikan script bagus untuk menampilkan artikel yang baru saja kita posting dan meletakannya disamping sidebar blog. Sebenarnya didalam template blogger sendiri memiliki beragam jenis widget. Namun untuk postingan tebaru tidak disediakan dan kita harus sedikit memodifikasinya dengan beberapa style css dan javascript.
Pada tutorial sebelumnya admin telah mengepost beberapa cara dan langkah memasang widget responsive postingan terbaru untuk di sidebar. Namun cara itu adalah dengan menggunakan gambar. Silahkan baca tutorial berikut ini jika kalian ingin memasang widget artikel terbaru dengan thumbnail gambar.
Baca Juga : Cara membuat widget Recent post keren dan ringan di Blog
Nah tutorial diatas sangat membantu teman teman untuk membuat recent post with thumbnail, tetapi saat dipasang tidak membebankan template anda sehingga pada saat diload terasa ringan dan tidak berat. Namun script yang akan admin bagikan kali ini akan sangat berbeda dan sangat membantu teman teman untuk membuat recent post responsive. Kira kira penampakannya seperti ini :
DEMO
oke sobat untuk cara membuatnya sangat mudah silahkan ikuti langkahnya berikut:
Widget Recent Post(Artikel Terbaru) Tanpa Gambar Responsive
Silahkan masuk kehalaman login blogger anda lalu pilih TATA LETAK/LAYOUT >> Tambahkan Gadget >> Pilih HTML/JAVASCRIPT
Oke langkah selanjutnya silahkan kalian copy paste script dibawah :
Script tanpa nomor:
<style scoped='' type="text/css">
ul#posting-terbaru{list-style:none;margin:0;padding:20px; background: linear-gradient(70deg, #ffffff 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f5f5f5 60%, #fbfbfb 60%);font-weight:300}li.posting-terbaru{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.posting-terbaru:last-child{border-bottom:0;}
li.posting-terbaru a{color:#444;}li.posting-terbaru a:hover{color:#444;text-decoration:underline}
</style>
<ul id="posting-terbaru"></ul>
<script>
//<![CDATA[
let urlblogkalian = "https://jagoankode-one.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(jagoankode){if(document.getElementById("posting-terbaru")){let jagoankodemantap=jagoankode.feed.entry,title,link,content="",jagoankodeasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(jagoankodemantap[s].link[g].rel=="alternate"){link=jagoankodemantap[s].link[g].href;break}}let title=jagoankodemantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}jagoankodeasem.innerHTML=content}}let jagoankodeasu=document.createElement('script');jagoankodeasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(jagoankodeasu);
//]]>
</script>Script menggunakan nomor :
<style scoped='' type="text/css">
ul#posting-terbaru{counter-reset: my-sec-counter;list-style:none;margin:0;padding:20px;background: linear-gradient(70deg, #ffffff 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f5f5f5 60%, #fbfbfb 60%);font-weight:300}li.posting-terbaru{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.posting-terbaru::before{counter-increment: my-sec-counter;content: counter(my-sec-counter)".";font-weight: 800;font-style:italic;margin-right:5px;}
li.posting-terbaru:last-child{border-bottom:0;}
li.posting-terbaru a{color:#444;}li.posting-terbaru a:hover{color:#444;text-decoration:underline}
</style>
<ul id="posting-terbaru"></ul>
<script>
//<![CDATA[
let urlblogkalian = "https://jagoankode-one.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(jagoankode){if(document.getElementById("posting-terbaru")){let jagoankodemantap=jagoankode.feed.entry,title,link,content="",jagoankodeasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(jagoankodemantap[s].link[g].rel=="alternate"){link=jagoankodemantap[s].link[g].href;break}}let title=jagoankodemantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}jagoankodeasem.innerHTML=content}}let jagoankodeasu=document.createElement('script');jagoankodeasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(jagoankodeasu);
//]]>
</script>Catatan :
Ganti urlblogkalian:https://jagoankode-one.blogspot.com/ dengan url blog kalian masing masing. Dan ganti jumlahpost = 5; dengan jumlah widget yang akan ditampilkan sesuai keinginan kalian.
Script ini support untuk blogger versi terbaru jadi jangan takut kode ini pasti work di bentuk versi blog mana saja. semoga bermanfaat.
