Contoh Membuat Recent Post di Blogger

Recent post atau dalam bahasa Indonesia nya adalah postingan terbaru, yaitu merupakan salah satu widget yang juga sangat berperan penting untuk sebuah blog, hal ini bertujuan agar para pengunjung yang mengengunjungi sebuah blog dapat dengan mudah mengetahui postingan yang baru saja di publikasikan oleh si penulis blog tersebut. Dengan ada nya recent post pengunjung pun mungkin akan merasa senang terhadap suatu blog karena dengan mudah akan mendapatkani postingan apa saja yang baru di blog itu. Oleh karena itu, tak sedikit para blogger membuat recent post di blog yang mereka kelola dan bahkan dengan berbagai macam variasi recent post yang mereka buat. Kali ini saya juga akan mencoba untuk berbagi bagaimna cara membuat recent post dengan mudah. Silahkan ikuti langkah - langkah nya yakni sebagai berikut:

A. Membuat recent post default atau bawaan blogger.

1. Masuk ke akun blogger
2. Pilih menu "tata letak"
3. Kemudian pilih "tambahkan gadget"
4. Setelah muncul jendela popup pilih "feed"
5. Pada kotak feed URL silahkan isi dengan alamat seperti ini "http://namablogkamu.blogspot.com/feeds/posts/default" atau terkadang bisa juga lansung dengan alamat blog teman "http://namablogkamu.blogspot.com" (ingat tanpa tanda kutip ("")).
6. Terakhir klik "lanjutkan/simpan", dan selesai.
7. Silahkan lihat hasil nya.

B. Membuat recent post dengan fitur HTML/JavaScript.

     Silahkan Copy terlebih dahulu script di bawah ini!

<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/AVvXsEg1Ea4KYTDwrRbwVzmscOQRTkZ_aIGZbwJ5fEg0ctswzkFMJO5eLz2lRlFTw3sp_C5V1AJ-3qB9ZfXS5tb_EDtHJSzKxZhHnlgYiZbOB6VHnaaT9pzn8pmq72-gH_uMuOsCMHnm6sdRoBfh/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 = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://ajorb.blogspot.com" rel="nofollow">Recent Post</a> <noscript>Your browser does not support JavaScript!</noscript> <link href='https://namablogkamu.blogspot.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 #69B7E2;} .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;} ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;} .recent-posts-container a{text-decoration:none;} .recent-post-title {margin-bottom:5px;} .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;} .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;} .recent-posts-details a{color: #777;} </style>

1. Masuk ke akun blogger
2. Pilih menu "tata letak"
3. Pilih "tambahkan gadget"
4. Setelah itu pilih dan klik "HTML/JavaScript"
5. Pada kotak HTML/JavaScript, silahkan paste script yang telah di copy tadi
6. Klik simpan dan selesai.
7. Terakhir silahkan lihat hasil recent post yang telah teman buat.

Keterangan:

• Ganti link yang berwarna biru dengan alamat blog kamu,(Http://namablogkamu.blogspot.com).
• Untuk mengganti jumlah post yang ingin ditampilkan di recent post silahkan cari "var posts_no = 5;" ganti angka 5 dengan jumlah angka yang diinginkan.
• Jika teman tidak suka dengan tampilan script recent post yang saya bagikan tersebut, maka silahkan di edit, atau bisa juga cari script recent post yang lain yang sudah banyak tersebar dan sesuai dengan keinginan. Atau mungkin bisa juga buat sendiri scriptnya, itu kalau teman sudah ahli. 

Semoga bermanfaat!!