Cara Menampilkan Recent Posts Per Labels Di Blogger

Widget recent posts berdasarkan labels atau kategori postingan di blogger ini akan otomatis menampilkan postingan atau artikel terbaru, sesuai dengan labels atau kategori yang ditentukan.
Dengan cara ini, anda dapat mengatur menampilkan thumbnail pada widget, tanggal postinga, jumlah komentar atau link readmore. Untuk membuat atau menambahkan widget recent posts blogger
berdasarkan labels atau kategori pada blogger   tidaklah sulit, ikuti saja step dibawah ini.

A. Step pertama :

1. Login Blogger.com akun anda ---> pada dasboard --> klik template --> edit HTML
    Cari kode berikut ]]></b:skin> dan letakkan kode CSS dibawah ini diatas kode ]]></b:skin>

    /*  Recents Posts Per Labels Blogger Cybermales  */
    img.label_thumb{
    float:left;
    padding:5px;
    border:1px
    solid #F3F3F3;
    background:#D2D0D0;
    margin-right:10px;
    height:55px;
    width:55px;
    }

    img.label_thumb:hover{background:#f7f6f6}
    .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:10px;
    list-style:none;
    }
    .label_with_thumbs a{}
    .label_with_thumbs strong{}

 2. Lalu cari kode </head>  kemudian letakkan script dibawah ini diatas ( sebelum ) 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/AVvXsEhH9EvwyRL9GozVSTAaSAM9gwL02_zNvsrK5pEo3co_SA-1Evbh4D16nqHF2WHLIATSEtpIOvwNGPwc9pjeo48sOQZyZVvno-tfik_R3zGG-9-h2Xw5KOYrlJNj64wHgcCea66lm7O2zwjG/';}
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]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";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>

 3. Save.

B. Step Kedua :

    Masih pada dasboard  --> pilih  --> Tata Letak --> tambah gadget ( add gadget ) -->
    Pilih HTML/JavaScript.

 Copy pastekan kode dibawah ini :  

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Labels Here?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Letakkan kode tersebit pada form yang muncul dan beri judul yang anda inginkan ( judul labels postingan blog )

C. Setting kode script diatas bisa sobat rubah sesuai keinginan, berikut keterangannya.

Numposts adalah angka jumlah posting yang ingin sobat tampilkan.
Jika sobat tidak ingin menampilkan thumbnail ganti "true" menjadi "false"
begitu juga jika sobat ingin menampilkan tanggal, read more, dan summary, sobat cukup merubah semua yang bertuliskan "false" ganti menjadi "true"
Tulisan "Labels Here" silahkan diganti dengan labels postingan blog sobat masing masing atau pilih yang sobat ingin tampilkan. Terakhir  simpan template sobat dan lihat hasilnya.

Demikian cara membuat atau menambahkan widget recent posts berdasar judul labels atau kategori pada blogger.  Semoga bermanfaat.

Read More