Recent Post Thumbnail

How To Create And/Or Add Recent Post Thumbnail? In Indonesian it means: Bagaimana Cara Membuat Dan/Atau Menambahkan Widget Recent Post Thumbnail/Post Terkini/Artikel Terbaru Di Blogger?

Well, first i have to tell you that this widget is for blogger blog, so if you're not a blogger then this will certainly make no sense on you, and so you are permitted to just leave this page. And that, the widget i'm going to tell you here is not my own creation, but i just stole it from somebody out there. People said, the name is mas colis, which currently manages some websites that which most of those are among blog tutorial category. One blog belong to him that i can still remember is creatingwebsite-maskolis.blogspot.com, it's in Indonesian. Check it if you'd like. :)

Well, as you might guess, recent post is a widget that will help you displaying recent posts on your blog. It's definitely usefull for your blog navigation.

There are two ways to add this widget to your blog, manually and automatically. The manual way, will require you to add the code to your template yourself, while the automatic way will require you to only make a click and define some preferences.

One recent post widget that i know is the recent post widget created by bloggerplugins.com. Visit that website if you prefer to add the widget automatically.

This automatic way above is more likely to be the more preferable option to choose. It's completely easy, and take no a minute to install. However, the manual way is sometimes the right option to choose in a specific conditions, like so if the server of the widget is experiencing errors so the widget doesn't show up on your blog (if you've installed the widget through bloggerpluggins), or maybe that you want to minimalize your blog load ("though a little bit"), or any other reason.

For that reason, here i'm not telling for only the automatic way, but also the manual way.

Below is code to add the widget manually. Follow the guide.

1. Find the closing tag </head> in your template, and add the script code below right above it.

<script type='text/javascript'>
//<![CDATA[
imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZ__wQf7rNZ7v9vN2z8VD6UYMk1uPKQeaFHJn17ftKyJlrIgrjqEdEY_6wNm0WlVHp1yg8_NEzqa2jRud0qkagnmlHSqeqOyavrhOqPW0TqsdcWCmkzzaGSJuXiw1670NJrlW4WAL646U/s1600/No+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 300;
numposts = 7;

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) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array(); document.write('<div class="slides">')
if (numposts <= json.feed.entry.length) { maxpost = numposts;
}
else
{

maxpost=json.feed.entry.length; }
for (var i = 0; i < maxpost; 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><font color="'+acolor+'">('+pcm+' '+text+')</font></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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="280" height="200" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
document.write(trtd);

j++;
}
document.write('</div>')
}

//]]>
</script>

Here to copy
<script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZ__wQf7rNZ7v9vN2z8VD6UYMk1uPKQeaFHJn17ftKyJlrIgrjqEdEY_6wNm0WlVHp1yg8_NEzqa2jRud0qkagnmlHSqeqOyavrhOqPW0TqsdcWCmkzzaGSJuXiw1670NJrlW4WAL646U/s1600/No+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 150; summaryTitle = 300; numposts = 7; 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) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); document.write('<div class="slides">') if (numposts <= json.feed.entry.length) { maxpost = numposts; } else { maxpost=json.feed.entry.length; } for (var i = 0; i < maxpost; 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><font color="'+acolor+'">('+pcm+' '+text+')</font></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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="280" height="200" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>'; document.write(trtd); j++; } document.write('</div>') } //]]> </script>

Here are lines that you may want to edit.

imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZ__wQf7rNZ7v9vN2z8VD6UYMk1uPKQeaFHJn17ftKyJlrIgrjqEdEY_6wNm0WlVHp1yg8_NEzqa2jRud0qkagnmlHSqeqOyavrhOqPW0TqsdcWCmkzzaGSJuXiw1670NJrlW4WAL646U/s1600/No+image.jpg"; <!-- For "image not available" -->
showRandomImg = true;
aBold = true;
summaryPost = 150; <!-- Total pos summary to show -->
summaryTitle = 300; <!-- Total character for title -->
numposts = 7; <!-- Total post to show -->

var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="280" height="200" src="'+img[i]+'"/></a></p> <!-- This script loads the image -->
<div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div> <!-- This script loads the Title -->
<p>'+removeHtmlTag(postcontent,summaryPost)+'... </p> <!-- This script loads post summary + ... -->
<a href="'+posturl+'" class="readmore">Read more &#187;</a> <!-- This script load read more link -->
</div>';

Change and move/arrange all the above the way you want.

2. Place the below code where you want the widget to show up.

<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>

Here to copy
<script> document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;); </script>

That's it. Hope this is a good tutorial to you. Have a nice day everybody. :)