Kali ini saya akan membagikan (lagi) cara membuat Widget Recent Post by Label, atau orang sering sebut kumpulan artikel terakhir/terbaru yang diurutkan berdasarkan label.
Mengapa saya katakan lagi? Karena sebelumnya saya sudah pernah membuat artikel serupa seperti ini, tetapi kali ini saya membuatnya dengan desain yang lebih minimalis, bagus, dan modern, yaitu berbentuk 3 kontainer. Untuk lebih jelasnya silahkan anda lihat gambar diatas.
Berikut beberapa kelebihan dari widget ini dibanding sebelumnya, yang saya tandai dengan (*).
- Jauh lebih responsif *
- Dapat berubah menjadi 2 kontainer bila dilihat melalui tab, dan
- Berubah menjadi 1 kontainer bila dilihat melalui mobile/handphone.
- SEO Friendly
- Tanpa Javascript/CSS eksternal
- Lebih minimalis dan tidak membuang-buang space *
- Ringan, tidak butuh loading yang lama
- Otomatis mengupdate artikelnya
- Pemasangan yang sangat mudah
Tanpa panjang lebar lagi, mari kita bahas cara membuatnya.
- Silahkan sobat login terlebih dahulu di blogger.com > Laman > Buat laman baru.
- Lalu sobat tekan mode HTML, dan masukkan kode ini didalamnya.
<style>
ul {list-style:none}
.entry-content {padding:0 !important}
.tagpost_thumb {float:left;width:100%;height:160px;border-bottom:2px solid #eee}
.clearfix {height:350px;margin:2.5% !important;background:#fff;box-shadow:0 1px 3px rgba(0,0,0, 0.16),0 1px 2px rgba(0,0,0, 0.32);width:28.33%;float:left;list-style:none}
.juduljarwo {line-height:1.8!important;font-size:18px!important;font-family:lusitana,serif}
.bungkus {padding:15px 10px 5px;text-align:center}
@media screen and (max-width:375px) {.clearfix {height:100% !important;width:96%!important}}
@media screen and (max-width:575px) {.clearfix {width:44%}}
</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('<div class="bungkus"><a class="juduljarwo" href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a></div><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&alt=json-in-script&callback=tagpostthumbs"></script>
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" +
size + "-c");
image[i].width = size;
image[i].height = size;
}
} resizeThumb('Blog1', 160);
//]]>
</script>
- Silahkan sobat ganti tulisan yang berwarna biru muda dengan nama label sobat, ingat, jangan sampai salah satu huruf pun, karena case-sensitive.
- Bila sobat mengalami masalah seperti loading gambar yang lama, silahkan sobat hapus semua kode yang berwarna ungu. Ingat! Hanya bila mengalami masalah loading yang lambat/lama, karena kode tersebut berguna agar thumbnail tidak blur.
- Sekarang coba sobat lihat hasilnya dengan mempublikasikan lamannya.
Bagaimana? Apakah widget berjalan dengan sempurna? Semoga widget diatas dapat membantu sobat dan bila terjadi masalah/pertanyaan silahkan bertanya lewat kolom komentar dibawah.
Update:
- 29 Juli 2017 - Perbaikan post yang memiliki titik disebelahnya dan margin yang tidak work (berdempetan).
Jujur saja, saya menghabiskan banyak waktu agar kedua widget recent post saya ini dapat work di laman. Jadi saya harap anda dapat menghargai widget saya ini.