Untuk membuat Recent Post dengan Thumbnail dan berdasarkan kategori/label tertentu (seperti terlihat pada gambar diatas), caranya adalah sebagai berikut:
1. Masuk ke Blogger –> Template –> Edit HTML
2. Dengan menggunakan CTRL + F, carilah baris kode
]]></b:skin>
dan tambahkan baris kode berikut diatasnya
/* Recent posts dengan thumbnail dan kategori
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* tinggi Thumbnail */
width:68px; /* lebar Thumbnail */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 0px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#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:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a { text-transform: normal;}
#label_with_thumbs strong {padding-left:0px; }
dimana tinggi dan lebar thumbnail dapat diganti sesuai keinginan.
3. Setelah itu carilah baris kode
</head>
dan tambahkan baris kode berikut diatasnya
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="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/AVvXsEjEfJOfYPpg84vqET82fRhR6zN7RgHFXOD77dp0nghHvB6VCAoo2Jz2la75Y0B7t5qepk5mMD5pz8VfzpCSK_W59RvsTAijrO_8X1DcE-cGgtvI0FPKPd9kJytPX4TH_8mqnbKN1qisBhU/s1600/picture_not_available.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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";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>
catatan: jika ingin menambahkan gambar sendiri untuk postingan yang tidak mempunyai gambat, gantilah baris kode yang berwarna merah dengan alamat gambar yang diinginkan.
4. Untuk mendapatkan resolusi gambar yang lebih baik, tambahkan baris kode berikut diatas baris kode </body>
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);
</script>
5. Simpan.
6. Untuk menampilkan hasilnya, recent post dengan thumbnail berdasarkan kategori/label, masuklah ke Tata Letak –> Tambahkan Gadget
pilih HTML dan masukan baris kode berikut
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nama-kategori?published&alt=json-in-script&callback=labelthumbs"></script>
dimana Nama-kategori ganti dengan nama kategori/label sebenarnya.
catatan:
var numposts ← jumlah postingan yang ditampilkan (ganti sesuai keinginan)
var showpostthumbnails ← tampilkan/sembunyikan thumbnails
var displaymore ← tampilkan/sembunyikan “read more" link
var displayseparator ← tampilkan/sembunyikan separator
var showcommentnum ← tampilkan/sembunyikan jumlah komentar
var showpostdate ← tampilkan/sembunyikan tanggal postingan
var showpostsummary ← tampilkan atau tidak kutipan posting
var numchars ← jumlah karakter kutipan (ganti sesuai keinginan)
7. Simpan dan lihat hasilnya.
Catatan:
a. Jika ingin menampilkan recent post nya tanpa kategori/label, ganti baris kode kode terakhir pada bagian no. 6 dengan baris kode berikut:
<script type="text/javascript" src="/feeds/posts/default?published&alt=json-in-script&callback=labelthumbs"></script>
b. Jika kategori terdiri dari 2 kata atau lebih, untuk spasi antar kata gunakan %20, misal edit%20template
itulah cara untuk membuat Recent Post dengan Thumbnail dan berdasarkan kategori/label tertentu yang digunakan di blog ini. Selamat mencoba dan semoga berhasil.
sumber: http://helplogger.blogspot.co.id/2013/04/show-recent-posts-with-thumbnails-for.html
