Penulis: Moch Adnan dipublikasikan: 10 Oktober 2023
Hallo sobat blogger semua, saya yakin sobat sudah sering mendengar dan juga mengerti akan makna dari widget atau gadget yang terdapat di blogspot atau blogger ini. Nhaa pada kali kesekian kalinya ini, saya akan kembali membagikan tutorialnya lagi cara menampilkan postingan terbaru atau biasa juga di sebut widget Recent Posts.
Widget Recent Posts Untuk Blogger
Widget Recent Posts Untuk Blogger



Widget atau gadget ini adalah elemen yang memiliki fungsi khusus yang dapat digunakan untuk menambahkan konten, teks, gambar, struktur kode Script, HTML, dan video. 

Berikut adalah penampakan hasil pembuatan Recent Posts yang akan saya bagikan:
cara membuat widget recent posts

Gimana sob, tertarik untuk coba membuatnya juga? Mari,lanjut membacanya.

Baca juga: 
Cara Membuat Efek Berputar Pada Gambar Ketika Terkena Kursor

Cara Membuat Widget Recent Posts Untuk Blogger

Copy dan save kode berikut ini:

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 6;var posts_date = true;var post_summary = true;var summary_chars = 530;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #DCDCDC;}
.recentpoststyle a:hover {color: #565656;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#808080;background:#DCDCDC; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #DCDCDC; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>


Ubah pada bagian kode var posts_no = 6 untuk menampilkan berapa banyak jumlah judul postingan yang ingin sobat tampilkan.
Ubah pada bagian kode var summary_chars = 530 untuk menampilkan berapa panjang cuplikan teks/artikel pada tiap masing-masing penggalan judul.

Seperti biasa, "Login" terlebih dulu kedalam halaman blog sobat. 
widget
Setelah itu pilih "Tata letak", dan lanjut dengan memilih menu "Tambahkan gadget".
widget/gadget
Pilih "HTML".
widget HTML
Pastekan kode script diatas ke dalam gadget HTML, beri judul pada bagian judul gadget dan yang terpenting sobat harus merubah tulisan "blogsobat disini" dengan URL blog sobat sendiri.

Adapun untuk mengatur berapa banyak jumlah postingan yang akan ditampilkan,sobat bisa menyetelnya pada bagian kode var posts_no = 6;yang saya warnai biru.

Baca juga:
Membuat Efek Pergantian Warna Pada Gambar Ketika Terkena Kursor

Last, jangan lupa untuk "Save" supaya hasil kerja keras sobat tidak terbuang sia-sia.

Pemasangan widget ini bisa sobat tempatkankan di header, sidebar atau footer blog dengan cara "Tahan dan menyeretnya". 
Terimakasih sudah berkunjung dan membaca artikel ini, selamat mencoba.