Widget bisa ditambahkan sesuai fungsinya, akan tetapi widget yang dipasang janganlah terlalu berlebihan agar tidak mengurangi peforma kecepatan website. Widget yang dipasang secara berlebihan dapat membuat pengunjung tidak nyaman atau website terkesan norak.
Pemasangan widget harus benar-benar dibutuhkan oleh pengunjung blog dan pemilik blog. Salah satu widget yang memiliki kriteria itu adalah widget recents post / postingan terbaru. Recents post atau postingan terbaru wajib di pasang agar pengunjung blog mengetahui dan membaca postingan terbaru. Tujuannya agar mereka tertarik lalu mengklik dan membacanya.
Dengan memasang widget recent post secara tidak langsung kita sedang mempublikasikan tulisan terbaru yang ada di blog. Memunculkannya di sidebar agar tampil dalam setiap postingan setelah mereka membaca maka mata pengujung blog akan terbiasa dengan memperhatikan tulisan disampin.
Widget sidebar ini biasanya juga sering dipasangkan iklan agar terlihat oleh pengunjung blog. Begitu juga dengan postingan baru yang sudah kita publikasikan harus kita tampilkan agar terlihat. Recent post harus dibuat lebih menarik misalnya dengan memberikane sentuhan warna atau juga gambar thumbnail sehingga mereka sepintas membaca dan penasaran untuk mengklik postingan yang kita pasang di widget.
Berikut ini cara menambahkan widget recent post ringan yang bisa kalian pasang pada blog kalian, yaitu:
Tahapan cara menambahkan widget recents post ringan:
Terlebih dulu kalian masuk kedalam blog kalian caranya silahkan login seperti biasa, lalu disamping kanan klik tata letak pada layar sampingnya akan muncul desain template kalian. Silahkan pilih widget HTML lalu masukkan kode berikut ini untuk menambahkan widget recent posts:<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRazlxaqZfuiXPcVqgxy91PCNykJ9ZoSVOL7mZ5nn6mT0xVw1_9-tqd5A-6KC6kNljtXugPCHvwATp1BF7ZO4flq5ZNsN2b2UNLIRRet5gV0OF9zayrj7CWa24zKBv2ENkh-i7-UaNvGU/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = false;
var showcommentslink = false;
var posts_date = false;
var post_summary = true;
var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #43ce8e;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:13px; text-transform: uppercase; color: #43ce8e;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>Silahkan tambahkan kode di atas kedalam widget HTML tadi lalu simpan. selanjutnya silahkan lihat perubahannya.
Widget recents posts ini tergolong ringan dan bisa juga dilakukan beberapa perubahan seperti jumlah postingan. tampilan thumbnail dll. Jika kalian ingin mengganti beberapa perubahan pada recents post silahkan lakukan perubahan sesuai dengan kebutuhan dan selera masing-masing.
var posts_no = 5; (Jumlah banyaknya postingan yang ingin di tampilkan)
var showpoststhumbs = true; (Ganti "false" jika tidak ingin menampilkan thumbnail )
var readmorelink = false; ( Ganti "true" jika ingin menampilkan tulisan "readmore")
var showcommentslink = false; (Ganti "true" jika ingin menampilkan jumlah komentar)
var posts_date = false; (Ganti "true" jika ingin menampilkan tanggal)
var post_summary = true; (Ganti "false" jika ingin menyembunyikan paragraf awal postingan)
var summary_chars = 80 (Jumlah karakter "summary" bisa dirubah sesuai kebutuhan)
Mudah-mudahan postingan ini bermanfaat, jika ada kendala atau kesulitan dalam menambahkan widget recent posts ringan ini silahkan tulis saja di kolom komentar. terima kasih.