Recent Posts Berdasarkan Kategori

Kali ini saya akan jelaskan bagaimana cara membuat recent post berdasarkan kategori. Widget ini mempunyai tampilan yang cukup bagus dan tidak ,kalah menarik dengan recent post lainnya. Widget ini juga bisa digunakan menjadi beberapa kategori, tergantung seberapa banyak anda ingin menampilkan recent post pada halaman blog. Fungsi lainnya widget ini mempermudah pengunjung melihat artikel berdasarkan kategori secara langsung dari sidebar. Selain itu widget ini dilengkapi beberapa fasilitas guna mendukung tampilannya. Baiklah, sekarang mari kita bahas cara membuat recent posts berdasarkan kategori. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

img.label_thumb{float:left; margin-right:10px !important; height:65px; width:65px; border:1px solid #fff; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.4); -moz-box-shadow:0 1px 1px rgba(0,0,0,.4); box-shadow:0 1px 1px rgba(0,0,0,.4)}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; padding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:0px; border-bottom:1px dotted #999}
.label_with_thumbs li{list-style:none; padding-left:0px !important}
.label_with_thumbs a{text-transform:uppercase}
.label_with_thumbs strong{padding-left:0px}

Selanjutnya masukkan kode berikut di atas kode </head>

 <script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNq6WwZts6r6JVCdLPwvjW84Z02HwBtzKzIY-HJ0Iw3BSp6X4sQnXwgUzVEDKwe_WY9-p8TuQniJmNXNpXSVZxFhNw8pvca5rHkgfpsN8UE7bubgWao36g6VCo6RiQ-tRM0fb0Xls1zlc/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Klik Simpan
Selanjutnya klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Kalau mau edit tempilan widgetnya, perhatikan beberapa kode berikut (kode widget pada HTML/JavaScript.

var numposts ← jumlah posting yang akan ditampilkan
var showpostthumbnails ← menampilkan atau menyembunyikan thumbnail gambar
var displaymore ← menampilkan atau menyembunyikan readmore
var displayseparator ← menampilkan atau menyembunyikan sparator
var showcommentnum ← menampilkan atau menyembunyikan jumlah komentar
var showpostdate ← menampilkan atau menyembunyikan tanggal posting
var showpostsummary ← menampilkan atau menyembunyikan cuplikan posting
var numchars ← menampikan jumlah cuplikan post karakter

Selanjutnya klik Simpan dan lihat hasilnya.
Demikian penjelasan cara membuat recent posts berdasarkan kategori. Semoga bermanfaat bagi semua, amin.  Selamat mencoba dan sukses selalu.

"keep spirits and do the best"