Cara Membuat Widget Recent Post by Label di Laman Blog
Cara Membuat Recent Post by Label di Laman Blog

Jikalau biasanya widget recent post by label itu dipasang di sidebar, sekarang saya Bang Jarwo akan membuat dan menempatkannya dalam suatu laman.

Widget recent post by label atau biasa dikenal juga widget penampil post berdasarkan label ini sering sekali saya jumpai pada blog-blog dengan desain yang minimalis, seperti blognya mba Arlina, Juragan Cipir, dan lain lain...

Salah satu keuntungan dari widget di laman statis ini adalah dapat menghemat space saat anda ingin menampilkan postingan yang diurutkan menurut label. Kita hanya perlu 1 laman saja, semua sudah masuk kedalamnya.

Nah kali ini saya Bang Jarwo akan membagikan cara membuatnya. Berikut beberapa fitur dari widget recent by label di laman ini.
  1. Ringan, tanpa CSS/JS eksternal
  2. Pemasangannya yang sangat mudah
  3. Widget akan otomatis menambah artikel bila anda memposting artikel baru
  4. SEO Friendly
  5. Responsive, tetap bagus dilihat dari mobile

Bila anda tertarik untuk membuatnya, silahkan ikuti langkah-langkah berikut ini.

  • Tentunya, pertama silahkan anda login ke blogger.com > Laman > Laman Baru
  • Lalu, masuk ke mode HTML dan masukkan kode ini didalamnya.

<style>
ul {list-style:none;padding:0 !important;margin:0 !important}
.entry-content {padding:0 !important}
.tagpost_thumb {float:left;margin-right:20px;width:100px}
.clearfix {height:140px;margin-bottom:20px;background:#eee;padding:15px}
.tagpost_thumb {margin-right: 20px !important;}
.juduljarwo {font-size: 120%;font-weight: 700;}
</style>

<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function tagpostthumbs(json){document.write('<ul class="taglabel">');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='http://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.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]="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(tagpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="tagpost_thumb" src="'+thumburl+'"/></a>');document.write('<a class="juduljarwo" href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><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(tagpostsummary==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(tagpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(tagpostcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Komentar')commenttext='1 Komentar';if(commenttext=='Tidak ada Komentar')commenttext='Tidak ada komentar';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(tagpostmore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="bacajarwo" title="'+posttitle+'">Baca Lagi »</a>';flag=1}document.write(towrite);document.write('</li>');if(tagpostseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}
//]]></script>

<script type='text/javascript'>
    var numposts = 500; // Jumlah Post yang akan ditampilkan
    var tagpostthumbnails = true;
    var tagpostmore = false;
    var tagpostseparator = true;
    var tagpostcommentnum = false;
    var tagpostdate = false; 
    var tagpostsummary = false; 
    var numchars = 50;
</script>

<script type="text/javascript" src="/feeds/posts/default/-/Nama Label?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>
Silahkan anda ganti kode yang berwarna kuning dengan judul label anda.

  • Selesai, sekarang silahkan anda publikasikan laman tersebut.

Mudah saja bukan? Tinggal copy-paste kodenya, tambahkan nama label yang ingin ditampilkan, selesai. Semoga widget ini bermanfaat bagi anda.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 4 September 2017 17.37

Wah sudah saya buat tapi gak work gan, entah kenapa...

Balas
I AM RYLL 09 Kode Jarwo
I AM RYLL 09
# 6 Juli 2017 17.05

kalo labelnya diganti dengan daftar laman statis bisa nggak

Balas