Cara Membuat Recent Post Simple, Keren, Elegant pada Sidebar Blogger

Membuat recent post simple, keren, elegant pada sidebar blogger sangat lah mudah, anda hanya cukup "Tambahkan gedget" pada menu "Tata" letak atau "Add a gadget" pada menu "Layout" lalu letakan kode yang sudah saya sediakan di bawah ini

Berikut tutorial lengkap nya:

Cara Membuat Recent Posts Keren di Sidebar Blog

1. Klik "Layout" > "Add a Gadget" > pilih "HTML Javascript"
2. Tulis nama widgetnya: Tulisan Terbaru, Recent Posts, dan semacamnya. Bebas lah...!
3. Copy + Paste kode berikut ini di dalam "Content"

<style type='text/css'>img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style><script style='text/javascript' src='https://googledrive.com/host/0BzPgmXeCwsMRcmlNOHhtaDNNMjA'></script><script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 50;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/>

Catatan:

1. Angka 5 adalah jumlah tulisan. Bisa diubah menjadi lebih kecil atau besar.
2. Kode biru adalah kode gambar. Jika tidak ingin ada gambar, judul doang, ubah "true" menjadi "false"
3. Angka 50 adalah jumlah karakter, bisa ditambah atau dikurangi.

Jika kode di atas "not works" atau tidak bekerja, coba gunakan kode lain di bawah ini:

<script type="text/javascript">
window.recentposts=(function(){var a=function(p){var d=p||{},i=d.url_blog||"",n=d.numberofposts||5,h=d.id_contain||"#rcposts",e=d.imagesize||40,b=d.snippetsize||100,c=d.loadingClass||"rcloading",m=d.commentstext||"Comments",l=d.firstcmtext||"Comment",f=d.NoCmtext||"No Comments",g=d.MonthNames||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],k=d.pBlank||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDdj8OjUYq2kbqpId4p-hDWUNHfTf0enmyiZsLwS2ZxXGjb7j6yS3XSL_kYQLcLuILYbp2Ke-MjUg08xbd2RmyAHDbmHyYDE4If_VyRZHOPkI3DL-aazV2Qltgo_SRxAcjYrp9X0JIkw/s1600/no.png";$(h).addClass(c);var j=i;if(i===""){j=window.location.protocol+"//"+window.location.host}$.ajax({url:j+"/feeds/posts/default?alt=json-in-script&orderby=published&max-results="+n+"",type:"get",dataType:"jsonp",success:function(v){var y,o,w,q,A,D,z,F,x,C,E,s="",B=v.feed.entry;if(B!==undefined){s="<ul class='rcpost'>";for(var u=0;u<B.length;u++){for(var t=0;t<B[u].link.length;t++){if(B[u].link[t].rel=="alternate"){y=B[u].link[t].href;break}}for(var r=0;r<B[u].link.length;r++){if(B[u].link[r].rel=="replies"&&B[u].link[r].type=="text/html"){w=B[u].link[r].title.split(" ")[0];break}}if("content" in B[u]){A=B[u].content.$t}else{if("summary" in B[u]){A=B[u].summary.$t}else{A=""}}if("media$thumbnail" in B[u]){D=B[u].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+e+"-c")}else{D=k}if(w===0){q=' <span class="rccomments">'+f+"</span>"}else{if(w===1){q=' <span class="rccomments">'+w+" "+l+"</span>"}else{q=' <span class="rccomments">'+w+" "+m+"</span>"}}A=A.replace(/<\S[^>]*>/g,"");if(A.length>b){A=A.substring(0,b)+"..."}o=B[u].title.$t;z=B[u].published.$t.substring(0,10),F=z.substring(0,4),x=z.substring(5,7),C=z.substring(8,10),E=g[parseInt(x,10)-1],s+='<li><a class="rcthumbs" href="'+y+'" target="_blank"><img style="width:'+e+"px;height:"+e+'px;display:block" alt="'+o+'"src="'+D+'"/></a><strong><a href="'+y+'" target="_blank">'+o+'</a></strong><span class="date"><span class="dd">'+C+'</span> <span class="dm">'+E+'</span> <span class="dy">'+F+"</span></span>"+q+"<p>"+A+"</p></li>"}s+="</ul>";$(h).html(s).removeClass(c)}else{$(h).html("<span>No result!</span>").removeClass(c)}},error:function(){$(h).html("<strong>Error Loading Feed!</strong>").removeClass(c)}})};return function(b){a(b)}})();
</script>
<style type="text/css">
ul.rcpost {line-height: 1.2;}
ul.rcpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;}
ul.rcpost .rcthumbs{float:left;margin:0 5px 5px 0}
ul.rcpost strong{display:block}
ul.rcpost p{margin:5px 0 11px}
ul.rcpost .date,ul.rcpost .rccomments{font-size:11px;display:none}
ul.rcpost .rccomments{padding-left:5px;border-left:1px solid #969191;display:none}
</style>
<div id="recentposts"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
recentposts({
numberofposts:5,
id_contain:"#recentposts",
commentstext:"Comments",
imagesize:72,
snippetsize:100
});
});
//]]>
</script>

Catatan:
Jika ingin menampilkan tanggal posting dan jumlah komentar, hapus kode warna merah [display:none].

4. Save!

Kini  widget Recent Posts Keren sudah muncul di sidebar blog Anda!

ALTERNATIF
Selain dengan menggunakan kode di atas, membuat Recent Posts di sidebar blog juga bisa dilakukan dengan cara berikut ini, namun hanya memunculkan daftar judul doang, dan maksimal 5 judul.

1. Layout > Add a Gadget > pilih "Feed"
2. Masukkan alamat blog Anda
3. Klik "Contonue"
4. Ubah nama blog Anda yang muncul di "Judul" dengan "Recent Posts" atau semacamnya.
5. Klik Save!

Sekian dulu tutorial nya ,semoga bisa membantu dan bermanfaat.