Cara Membuat Widget Postingan Terbaru Keren di Blogger

Hampir semua visitor berasal dari hasil penarian artikel, artinya mereka langsung menuju ke halaman postingan bukan ke halaman utama. Disisi lain, hampir tidak pernah pembaca membuka halaman utama setelah selesai membaca artikel yang di cari.

Dengan alasan tersebut, sangatlah wajar para blogger membuat widget postingan terbaru supaya pembaca langsung melihat postingan terbaru tanpa membuka halaman utama. Jadi pada kesempatan ini, saya akan berbagi trik cara membuat widget postingan terbaru di blogger.

cara membuat widget artikel terbaru di blogger

widget artikel terbaru via: www.leonardo.id

Cara Membuat Widget Recent Post di Blog

Cara yang saya bagikan ini sangat simple dan mudah untuk penerapannya, tanpa perlu mengotak-atik template. Cukup hanya menempelkan script di widget / gadget blogger. Namun sebelum menerapkannya di blog sobat, terlebih dahulu lihat demonya di sini.

Baca juga: Cara membuat kotak catatan keren pada postingan

Bagaimana tertarik? Kalo iya, silahkan ikuti langkah-langkah berikut ini:

Masuk ke Blogger
Lalu pilih Tata Tetak
Klik tambahkan Gadget, kemudian tambahkan HTML /Java Script seperti gambar dibawah ini

klik + (tambah) pada HTML/JavaScritpt
Tambahkan script berikut:

<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 = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #489a16;margin-top:10px;" href="http://www.leonardo.id/" rel="nofollow">Recent Posts</a>
<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: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#26bfba; 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: 6px;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #037975;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 13px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>

Save dan lihat hasilnya.

Untuk menampilkan postingan terbaru berdasarkan label atau kategori tertentu, sobat hanya perlu menambahkan URL blog dan memasukkan kode HTML/JavaScript seperti contoh dibawah ini:

https://www.alamatblogsobat.com/feeds/posts/default/-/label

Silahkan ganti dengan alamat blog, dan label yang akan ditampilkan.