Membuat Recent Post di Blog

Sebelum membahas cara menampilkan recent post dalam sebuah web atau blog. Admin seribu1 bakal nerangin dulu ke kalian apa itu recent post.

Dalam bahasa Indonesia recent post artinya postingan terkini. Jadi dengan widget ini pembaca dapat mengetahui artikel - artikel terbaru yang diterbitakan dalam suatu blog.

Recent post adalah widget yang paling sering dipasang di blog selain popular post.

Nah ada dua cara untuk membuat widget recent post di blogspot. Pertama dengan cara membuat kode HTML dan yang kedua dengan fasilitas gadget dari dashbord blogspot sendiri.

Untuk kode HTML bisa kalian copy dibawah ini:

Sebelum menyalin kode dibawah ini kalian harus login dulu ke akun blogger >> Pilih Tata Letak >> Tambahkan Gadget

>> Pilih HTML Biasa dan pastekan kode dibawah ini>> klik simpan.

Kode Recent post tanpa Thumbnail

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.seribu1.com",
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Ganti tulisan berwarna merah dengan nama website kalian dan angka 10 sesuai dengan jumlah postingan yang ingin ditampilkan.

Atau

Recent Post pake thumbnail

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZG4UK3IdB1-JNPkbmEOaVFHPUsr5uJYjmGKpmVUILY7QRZKH0ghO00yGNgLBNKjZfY5Szu9c9uWy2vf-NBoNfmNVFhyS65h7L8mt66jS3m6VBz8KUFOQaGHOFr_dMtqCFmcHgVwfti4l/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>');
</script>
</div>

Tulisan merah untuk jumlah post yang ditampilkan.

-----------------------------------------

Cara yang kedua bisa menggunakan gadget feed di blogspot. Caranya:

1. Login ke blogger seperti biasa

2. Pilih Tata Letak

3. Tambahkan Gadget

4. Pilih Feed

5. Masukkan tulisan dibawah ini:

http://www.seribu1.com/feeds/posts/default/

Silahakan ganti URL yang berawarna merah dengan URL blog anda

6. Klik lanjutkan, lalu isi jumlah postingan yang ingin ditampilkan lalu simpan.

Done!