Cara Pasang Widget Recent Posts per Label dengan Satu Thumbnail

Cara Pasang Widget Recent Posts per Label dengan Satu Thumbnail - Widget recent posts atau artikel terbaru yang akan saya bahas ini akan menampilkan posting-posting terbaru berdasarkan label tertentu dengan thumbnail atau gambar hanya pada artikel yang paling baru atau yang teratas. Sebelumnya saya juga pernah membahas widget recent posts per label, tetapi tampilan pada setiap artikel dapat disertai dengan thumbnail atau gambar.

Widget recent posts per label dengan satu thumbnail ini cocok dipasang pada template blog yang mempunyai banyak kolom sidebar. Tampilannya bisa dilihat pada bagian bawah blog ini. Saat saya membuat artikel ini, widget tersebut masih saya pasang. Namun, tidak menutup kemungkinan suatu saat nanti saya bisa saja menghapusnya.

Jika Sobat tertarik untuk memasangnya pada blog, silakan simak langkah-langkah untuk memasang widget artikel terakhir dengan satu thumbnail di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik segitiga hitam kecil ("Opsi lainnya") >> "Template".

3. Klik tombol "Edit HTML" >> tombol "Lanjutkan".

4. Silakan cari kode ]]></b:skin> lalu letakkan kode berikut ini di atas kode tersebut.

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}

img.label_thumb:hover{background:#f7f6f6}

.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}

ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

5. Selanjutnya cari kode </head> dan letakkan script berikut ini di atas kode tersebut.

<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/AVvXsEhKOII9ch9MCOeVjHHabVdHjkgSBUtSTyzA8cQdkoSNlkz1zihCBnDqz0MCWxdyZW4dcLFp6pVxTpuK5otYUBpU14I17xj03LZaCrTGyW15TflJ3X18h87TrEaIKSV0Hann9Fa9-Ds38tvo/';}

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>

6. Klik tombol "Simpan template".

7. Kemudian pergi ke menu "Tata Letak".

8. Klik menu "Tambah Gadget" >> "HTML/JavaScript".

9. Silakan beri judul yang diinginkan kemudian masukkan  script berikut di kolom "Konten".

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

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

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

• Ganti teks yang berwarna biru dengan nama label yang Sobat inginkan.
• Ganti teks yang berwarna merah dengan url blog Sobat.

10. Klik tombol "Simpan".

11. Klik dan seret gadget ke tempat yang Sobat inginkan.

12. Klik tombol "Simpan setelan".

Tampilan dari widget ini akan mengikuti pengaturan kode CSS sidebar pada template yang Sobat pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.