Recent Post Blog With Image

Trik kali ini, akan membahas tentang cara membuat static recent post dengan image thumbnails atau postingan artikel terbaru yang disertai gambar. Sebagai contoh, bisa dilihat pada sidebar blog atau pada contoh static recent post with image di bawah ini.

Bagaimana cara membuat static recent post with image ini ??? gampang, monggo disimak infonya...

• Login ke blog sobat.
• Klik "Design" kemudian klik "Add a Gadget" setelah itu pilih "HTML/Javascript".
• Copy - Paste kode di bawah ini kemudian letakan di konten gadget.
  
  <script> imgr = new Array(); showRandomImg = true; tablewidth = 300; cellspacing = 3; borderColor = "#f2f2f2"; bgTD = "#f2f2f2"; imgwidth = 80; imgheight = 80; fntsize = 12; acolor = "#666"; ccolor = "#5588aa"; cFontsize = 10; aBold = true; icon = " "; text = "comments"; showPostDate = false; summaryPost = 50; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 3; home_page = "http://monozcore.blogspot.com/"; </script> <script> function removeHtmlTag(strx,chop){ 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); } } s = s.join(""); s = s.substring(0,chop-1); return s; } function showrecentposts(json) { document.write('<table width="'+tablewidth+'" border=0 bordercolor="#FF0000" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'" align="center">'); j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; 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!="")) img[i] = d; cmtext = (text != 'no') ? '<i>('+pcm+' '+text+')</i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : ""; posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle; var trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; line-height:5px; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> <div style="font-size:'+cFontsize+'px; color:'+ccolor+';">'+cmtext+ '</div> ' + daystr + '<div style="color:'+summaryColor+'; margin-top:0px; border-top:1px '+borderColor+' solid; line-height:16px; font-size:'+summaryFontsize+'px;">'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</div></td></tr>'; if(summaryPost == 0) { trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '</td></tr>'; } document.write(trtd); j++; } document.write('</table>'); } document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script>
  
• Sesuaikan kode diatas yang berwarna merah agar sesuai dengan tampilan blog sobat.
  tablewidth = 300; // Lebar kotak widget
  borderColor = "#f2f2f2"; // Warna pembatas
  numposts = 3; // Jumlah postingan yang ditampilkan
  home_page = "http://monozcore.blogspot.com/"; // Alamat URL blog (NB: gunakan "/" pada akhir alamat seperti contoh diatas)
• Klik "Save" dan lihat hasilnya.

Semoga postingan artikel kali ini dapat memberikan manfaat untuk anda. Oke... selamat mencoba dan jangan lupa komentarnya yaa supaya info berikutnya lebih kreatif dan bermanfaat.