Menambahkan widget recent post sederhana pada blogger

Resent Post atau artikel terbaru yang muncul pada setiap artikel yang baru kita buat mempunyai fungsi untuk mempermudah pengunjung dalam menjelajah di blog kita, tidak semua pengunjung yang masuk ke blog kita melewati halaman utama tentu bila pengunjung yang masuk ke blog kita melalu situs pencarian seperti Google akan masuk ke kategori yang lain hal ini yang membuat pembuatan Resent Post perlu di lakukan agar pengunjung bisa melihat secara langsung artikel terbaru yang kita buat tanpa perlu klik terlebih dahulu ke tombol Home tentunya dengan peletakan resent post yang strategis seperti pada bagian wiget kiri, kanan atau bawah.

Pembuatan Reset post sebenarnnya cukup mudah  sudah banyak sekali para blogger yang sangat rajin membuat html untuk menghasilkan karya untuk para blogger agar blogger tersebut lebih terlihat enak di kunjungi, tetapi untuk kali ini saya akan membagikan kode HTML untuk resent post yang sederhana saja tetapi cukup berguna untuk para blogger.

Berikut saya jelaskan bagaimana proses pembuatannya agar lebih mudah silahkan di baca lebih teliti,.

1, Silahkan masuk terlebih dahulu ke blogger

2, Kemudian Klik bagian Tata letak yang berada pada blogger, silahkan di lihat pada gambar untuk lebih jelasnnya

3, Klik bagian sidebar untuk tambahkan Gedged kemudian Cari tulisan HTML/Java scripts kemudian klik bagian tersebut.

4, Copy semua Kode html ini, jagan ada sampai yang tertinggal

<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/AVvXsEjeiE6C5kclV0jL6GLsdttxC0Xfyl8iIm2Dfxa19yNV_kq2wKnFel8tSXsUAGB4R3sbF2bMXapO_rv2klc4U9eLNX30x8mkg0GJTYxxfamwFFrKiwGxpUi0wyshBjtSWUiPliTLH1el-PY/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 7px 10px 0}
ul.rcpost strong{display:block;line-height:normal;margin-top:-3px}
ul.rcpost p{margin:5px 0 10px;line-height:normal;font-size:11px}
ul.rcpost .date,ul.rcpost .rccomments{font-size:11px;display:none}
ul.rcpost .rccomments{padding-left:5px;border-left:5px 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:88,
snippetsize:90
});
});
//]]>
</script>

5, Paste kode HTML tersebut di kolom ini pada HTML/Java scripts lalu simpan,

Jika berhasil makan tampilan recent post pada blog anda akan seperti ini kurang lebihnnya..

Bagaimana mudah bukan, kode –kode tersebut bisa kita rubah sesuka kita seperti berapa tampilan yang akan di tampilkan jarak antara gambit dan lain-lain silahkan berkreasi sesuka hati. Semoga artikel tentang menambahkan resent post ini bisa bermanfaat.

Facebook Twitter Google+