Menampilkan Recent Post Berdasarkan Kategori

Keinginan untuk mempermudah pengunjung dalam mencari artikel ataupun memberi penampilan yang berbeda, merupakan salah satu hobi dan juga kepuasan tersendiri dalam mendesain/mengedit template blog, salah satunya adalah cara Menampilkan Recent Post Berdasarkan Kategori, berikut langkah-langkahnya:

Langkah 1:
- Login ke account blogger anda >> klik Rancangan >> klik Tambah Gadget
- Pilih HTML/JavaScript
- Copy kode script berikut ini,

<script type='text/javascript'>var numposts = 2;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 111;</script>

<script type="text/javascript" src="http://www.stofmaps.blogspot.com/feeds/posts/default/-/Tips Dan Trick?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan:
» Teks biru, jumlah nominal post yang akan ditampilkan
» Teks merah, ubah nama link/alamat web yang akan ditampilkan
» Teks jingga, ubah kategori yang akan ditampilkan
» showpostthumbnails = menampilkan gambar yang ada pada posting
» displaymore = menampilkan link teks 'more'
» var showpostdate = menampilkan tanggal terbit posting
» var showpostsummary = menampilkan sebagian kalimat pada posting

- Letakkan/paste kode script yang telah anda copy tadi pada kolom HTML/JavaScript
- Simpan

Langkah 2:
- Klik Edit HTML dan cari kode </head>
- Copy kode script berikut ini,

<!-- Label With Thumbnail -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){j=d}else{j="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3Wl44TArLC3lDi0kI5Fx1zIzrk3YEWg9hv9d6sMacZ2NvvQymcMNZGzKzn6ABb1Q-5GArG9fAFTVmwZeQRkZ_wgvovFWxrgkWp0GbjKfsw2Vhfis1veohthEdUF4sXWvCE0Q8I1r-q4/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" style="clear:left; float:left; width:43px; border:1px solid #eaeaea; margin:5px 5px 0px 0px;" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>

- Letakkan/paste kode script yang telah anda copy tadi di atas kode </head>
- Simpan dan selesai

Semoga bermanfaat...

Sumber Artikel

http://stofmaps.blogspot.com/2012/03/menampilkan-recent-post-berdasarkan.html