Membuat Recent Post Label Tertentu dengan Satu Gambar Thumbnail

Cara Membuat Widget Recent Post Label Tertentu dengan Satu Thumbnail Image (Gambar Thumbnail) sudah lama ada di blognya Maskolis.

Kodenya masih work. Widget posting terbaru berdasarkan label/kategori ini bisa dipasang di sidebar blog.

Biasanya widget ini banyak digunakan oleh blog konten berita. Salah satu fungsi widget recent post per label ini untuk memudahkan para pembaca mengeksplorasi tiap kategori yang ada.

Bisa juga untuk meringkas ruang pada sebuah template, khususnya yang tiga kolom.

Penampakannya seperti gambar ilustrasi posting ini. CB share juga kode dan cara pasang widget posting terbaru berdasarkan kategori hanya berupa judul posting saja.

Membuat Recent Post Label Tertentu dengan Satu Thumbnail

1. Template > Edit HTML

2. Copas kode berikut ini di atas kode ]]></b:skin>

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}

3. Copas kode berikut ini di atas 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/AVvXsEh4QHHn8dD_esit4uJWMcnpfrm506h0UZ-hucVDHHQb0m69q9Nn-UbnimBDEObfsRW6p75w_eQgLc2Vwgq_KFGvdKLl-PjCHoy3ra8V8mFYzTRfBxcUmKuGqUwuLU0B4AnbloqasTPuvijt/';}
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>

4. Save Template!

CARA PASANG WIDGETNYA

Kini saatnya memasang widget Recent Post Label Tertentu dengan Satu Thumbnail. Anda bisa pasang widget ini berkali-kali dengan label berbeda di Sidebar:

- Layout > Add a Gadget > pilih HTML/JavaScript

- Isi judul widget sesuai dengan label yang akan ditampilkan

- Masukkan kode berikut ini di kolom "Content"

<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/-/Label?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="/feeds/posts/summary/-/Label?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="/search/label/Label" style="float:right;font:normal 11px Arial;padding:5px 0;">Index &#187;</a>

Catatan:

Ganti Label dengan nama Label yang akan ditampilkan.

5. Save!

Bagaimana jika widget Recent Post Label Tertentu berupa judul saja? Gampang, gunakan saja widget bawaan blogger Feeds

- Layout > Add a Gadget > Feed
- Masukkan nama blog Anda di kolom Feed Url
- Klik "Continue"
- Klik "Change feed url" dan akan muncul, misalnya:

http://www.contohblog.com/feeds/posts/default

- Ubah bagian akhir URL yang muncul menjadi begini:

http://www.contohblog.com/feeds/posts/default/-/Label

- Ubah judul widgetnya sesuai dengan nama label

- Save!

Demikian cara Membuat Recent Post Label Tertentu dengan Satu Thumbnail. Good Luck & Happy Blogging! (www.contohblog.com).*