Wednesday, August 29, 2012
Recent Post Widget

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] = "http://4.bp.blogspot.com/-nJ19LiEdkSA/UDw-GKABXdI/AAAAAAAADlA/nqcvDC3DiaY/s1600/No%2Bimage.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


Here are lines that you may want to edit.

imgr = new Array(); imgr[0] = "http://4.bp.blogspot.com/-nJ19LiEdkSA/UDw-GKABXdI/AAAAAAAADlA/nqcvDC3DiaY/s1600/No%2Bimage.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


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

8 comments:

  1. Sory sob diluar pembahasan artikel diatas.
    1. Tampilan blog ini diberbagai browser terbaru kurang baik : https://lh6.googleusercontent.com/-kFr0I11Gwoc/UD7dXpAhOdI/AAAAAAAAEXg/g35fM0lqj98/s512/tampilan%2520anda.png

    2. Mengenai tukeran link, link sudah terpasang hari itu juga, mungkin tidak tampil link2 tsb ketika diakses melalui browser desktop anda.

    3. Dicopot atau tidak, tidak masalah buat saya...

    ReplyDelete
  2. Anonymous8/30/2012

    Tampilan link2nya merapat :)

    https://lh6.googleusercontent.com/-VXtkdYV3Krg/UD7gWgPprGI/AAAAAAAAEX0/qwrT3otNbzY/s512/8-30-2012%252010-34-32%2520AM.png

    ReplyDelete
    Replies
    1. Waduh.. Sampai hancur lebur begitu ya? Gue checkin diRS terdekat dulu deh bos.. Apanya yg salah ya?

      Thanks udah dikasih tahu.. God bless good guys. :)

      Delete
  3. Waduh.. kirain ini blog orang luar. ternyata blog orang indo ya ? hehehe :D saya dapet tutorial ini dari koment blog orang luar. Nice tutorial sob. dan iya kok tampilannya jadi hancur lebur ya...? tolong diperbaiki

    #Koment balik ditunggu Acep-Computer

    ReplyDelete
    Replies
    1. Tampilannya hancur gimana bro, bagian mana?

      Gua cek blog lu ya.. :)

      Delete
  4. please help... I have added the Popular post gadget on by blog. I wanted to make larger the thumbnail to 230x153. when i do that it just stretches the image instead. Do you know where I can change this?

    thank you for your time.
    http://jeanniecapellan.blogspot.com/

    ReplyDelete
    Replies
    1. Where did you get the gadget, from blogger gadget? I guess, you may want to write me the code. Here is my facebook: Bruce Barner . I'm sure i can help you solve the problem..

      Delete
  5. Please kindly help me. .I'm having problem installing related posts to my bloh....here is my email:aabdullahi45@yahoo.com
    My blog Is : nairatrends.blogspot.com

    ReplyDelete