Cara Membuat Recent Post Sesuai Dengan Kategori

Cara Membuat Recent Post Sesuai Dengan Kategori | Tutorial Kali ini saya akan menjelaskan Cara Membuat Recent Post Sesuai Dengan Kategori - jadi jika anda tertarik untuk membuat label thumb otomatis berdasarkan katagori tertentu silakan ikuti tutorial berikut ini :
Login Blogger > Rancangan / Layout > Edit HTML > Centang "Expend Widget"
Silakan copy kode ini dan taruh di atas </head>

<!-- 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/AVvXsEikvtBLCUMwVPQHUZDPdA3W7TufuilR0PSmPxwW0VEfZPA8DTR0ZDdxEvwYXjNtAO5jY3CccrQkng3n5tmcoGNBs6Ed9UfVbOs3SOqQ5RDu_V5bQGOspIyuCbgdmWYw7VjczgQTHIy3654/s1600/no_image.jpg" img alt="Cara Membuat Recent Post Sesuai Dengan Kategori" title="Cara Membuat Recent Post Sesuai Dengan Kategori"}}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" 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> 

Setelah selesai, silakan cari kode sidebar content
setelah ketemu kode berikut tepat di bawah sidebar content

/* Idblogmaker2 Content */.Idblogmaker2 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySnQistSiED54YB5xln-TdwPhOm_UpMBqyCL2ilJ2-6uKMMKYmJ-ki2oKUKFumEvJhgwa-NBG_2-6yh6NYWGbyRJ-v4kWXaRqy22TYUgZNASRqnzDhhNZ5QuAwyL30y0QYdyD2eomo5mJ/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker2 {font:normal 12px Arial; color:#555;line-height: 1.4em;} .Idblogmaker2 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker2 li {margin:0;padding:0 auto;text-indent:0px;line-height:1.4em;} .Idblogmaker2 .widget {background:url() repeat-x bottom left;margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker2 a:link, .Idblogmaker2 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker2 a:hover {color:#000;text-decoration:underline;} .Idblogmaker2 .widget-content {margin:0 auto;padding:6px 10px;} /* IDB Featured Categories */ img.label_thumb{float:left;padding:0 auto;border:none;background:none;margin:0 10px 5px 0;height:72px;width:72px;} img.label_thumb:hover{background:none;}.label_with_thumbs {float:left;margin:0;padding:0} ul.label_with_thumbs li {margin:0 0 5px;clear:both;}.label_with_thumbs a {} .label_with_thumbs strong {} /* Idblogmaker3 Content */ .Idblogmaker3 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySnQistSiED54YB5xln-TdwPhOm_UpMBqyCL2ilJ2-6uKMMKYmJ-ki2oKUKFumEvJhgwa-NBG_2-6yh6NYWGbyRJ-v4kWXaRqy22TYUgZNASRqnzDhhNZ5QuAwyL30y0QYdyD2eomo5mJ/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker3 {font:normal 12px Arial; color:#555;line-height: 1.3em;} .Idblogmaker3 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker3 li {margin:0;padding:2px 0;text-indent:0px;line-height:1.4em;} .Idblogmaker3 .widget {margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker3 .widget-content {margin:0 auto;padding:6px 10px;}.Idblogmaker3 a:link, .Idblogmaker3 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker3 a:hover {color:#000;text-decoration:underline;}

Panduan Melakukan Kostom tampilan Label Thumb Otomatis
Perhatikan warna-wana yang saya tandai di atas dengan warna-warna, jika anda ingin memodifikasi tampilan dasar label thub dapat kalian ubah sesuai dengan kebutuhan dan desain yang di inginkan. petunjuknya :

Warna Merah : image atau warna untuk judul label thumb,
Warna Biru : Ukuran image thumb yang di tampilankan, sebaiknya di ubah jadi 60px agar cocok untuk semua jenis template blog.
Wana Hijau : dapat Anda modifikasi jika anda tertarik untuk mengubah tampilan huruf dan ukuran dari huruf yang di tampilkan label thumb otomatis ini.
Memasang Label Thumb Otomatis Berdasarkan Katagori Tertentu Di Blog

Silakan buka Rancangan > Add Widget > Pilih HTML/Javascript
Silakan copy paste kode di bawah ini dan simpan di HTML/Javascript tadi

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

<script type="text/javascript" src="/feeds/posts/default/-/Olahraga?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Angka 4 yang di tebalkan di atas adalah jumlah dari sub label katagori yang di munculkan di label thumb otomatis ini.
Tulisan Olahraga yang di tebalkan adalah nama label yang di ingin di munculkan di label thumb. Jika label tersebut memiliki lebih dari satu kata, tambahkan %20 contohnyaTutorial %20 Blogger

Sampai di SIni Cara Membuat Recent Post Sesuai Dengan Kategori selesai
original from : newscheat.blogspot.com