Cara Membuat Widget Recent Post di Blog

Recent Post merupakan salah satu widget yang harus terpasang di sidebar blog. Widget yang satu ini, menampilkan artikel-artikel terbaru yang baru di publish atau diterbitkan pada sebuah blog. Memasang widget ini juga menjadi penting karena akan membantu pembaca menemukan artikel fresh yang mungkin belum diketahuinya.

Pada sebuah blog, recent post juga menjadi salah satu menu navigasi penting. Bersama popular post, kedua widget tersebut saling bersinergi mendatangkan banyak pageview. Dengan begitu, bounce rate pada sebuah blog dapat semakin diperkecil. Tentu hal tersebut perlu, dengan semakin kecil bounce rate menandakan pengunjung betah berlama-lama di blog yang anda kelola.

Membuat recent post di blog adalah hal yang mudah, terlebih waktu yang dibutuhkan juga relatif cepat. Berikut tutorial membuat recent post di blog.

Baca Juga: Cara Menyembunyikan Widget Artikel Terbaru di Homepage Blog

Membuat Recent Post di Blog

1. Login ke akun blogger anda

2. Buka menu Tata Letak, pilih Tambahkan Gadget, lalu klik HTML/Javascript

3. Masukan kode script dibawah ini pada kolom atau kotak tersebut

<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(p){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/AVvXsEjL5lrRKLLQeBdf0_MAQ90MYS3N3Qqpw0aF9Ui4DUVyh0-aCL9jV382YOM3LYcaD9PW0ZE8ugUg6kza6aGek-02-t4NQLR1xuQFZpALGHF3egwxxCA9I8xFkCC3g4aGgxi8fVfVGTlKEm_H/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),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>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 10px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#0F6DB3; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #374760; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

4. Klik tombol Simpan dan lihat hasilnya

Itulah tutorial singkat tentang cara membuat widget post di blog. Apabila anda masih bingung dan ingin bertanya seputar topik yang dibahas, silakan tanyakan lewat kolom komentar dibawah.

Bagikan Artikel ini