WIDGET Recent Posts, Latest Posts, Artikel Terbaru, atau Posting Terbaru merupakan salah satu widget yang 'wajib' dipasang di blog, biasanya di sidebar kanan.
Widget ini berisi daftar goresan pena terbaru, biasanya lima judul, sebagai bab navigasi dan internal link yang dianjurkan Google biar blog ramah pengguna (user friendly) juga ramah mesin pencari seo friendly.
Daftar posting terbaru juga terindeks Google.
Berikut ini dua aba-aba recent post untuk menampilkan goresan pena terbaru, berupa judul saja dan plus gambar thumbnail. Bisa juga per kategori/per label.
Cara Menampilkan Daftar Posting Terbaru
Memunculkan widget Recent Post Judul Doang (Per Label Juga Bisa)
1. Layout > Add a Gadget > HTML/Javascript
2. Isi judul widget dengan Latest Posts atau Posting Terbaru
3. Masukkan aba-aba ini:
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
Catatan:
1. Angka 5 yakni jumlah posting. Bisa diubah menjadi lebih kecil atau lebih besar. Sebailnya lima saja.
2. Jika ingin menampilkan per label atau kategori tertentu saja, maka tambahkan label menyerupai ini untuk aba-aba script terakhir:
<script src="/feeds/posts/summary/-/NamaLabel?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
Save!
Cara Memunculkan widget Recent Post Judul & Gambar Thumbnail:
1. Layout > Add a Gadget > HTML/Javascript
2. Isi judul widget dengan Latest Posts atau Posting Terbaru
3. Masukkan aba-aba 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/AVvXsEgbAff1wZXZ3zaXSeVyA7rzlVcwBfa8Kk9_HsBJ8R_wE0hjuX331nnmiLsSE9RMNrFc6OypwifZBYWLF94SaWFmctW4OOSj2W3mLTYfSjF-b7ObKWET2gY-xwcU6KZrz58ExZ-2P_S48jk/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="Cara Menampilkan Daftar Posting Terbaru Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori"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 11px;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: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:90
});
});
//]]>
</script>
Catatan:
Untuk menampilkan posting terbaru menurut label/kategori, ubah aba-aba warna merah menjadi /feeds/posts/default/-/NamaLabel?alt
4. Save!
Untuk widget recent posts untuk blogger yang terakhir ini, tampilanya berupa judul, gambar, dan ringkasan. Jika tidak ingin pake ringkasan, ubah saja angka 90 menjadi 0.
Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori sudah dites dan berhasil. Buktinya aku dapat bikin screen-shotnya menyerupai gambar ilustrasi di atas. Wasalam. (blogromeltea.blogspot.com).*
Sumber
0 comments: