Recent Comment on blogger and Recent Post on Blogger - Teach you how to customize it

Just simply edit the “http://YourBlogNameHere.blogspot.com” on the code with your own blog url. and done

If you want to learn about this widget, then please read this article more

Recent Comments on Blogger

This hack probably is one of the oldest blogger hacks ever.

So easy, Just do this steps;

1. Go to your Dashboard

2. Go to Template Tab

3. There you will see a widget manager. Click Add a Page Elements on the section you want to place the recent comment.

4. Now you should see a list of widget elements you can pick. click on the Add to Blog Button under HTML/Javascript. this element is useful if we want to add a 3rd party functionality or other code. so we pick this. remember to choose this elements each time you need to add third-party codes.

5. Now you should have a new popup window open,

- Leave the title blank

- And go to the content area.

- Copy this Code and paste on that widget content area.

please note: you should change the “http://YourBlogNameHere.blogspot.com” on the code with your own blog url.

<script src="http://files.lifewg.googlepages.com/blogger-widget.js"></script>

<script>

var numposts = 10;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

</script>

<h2>RECENT COMMENTS</h2>

<script src="http://YourBlogNameHere.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script>

6. Click Save Changes

7. Refresh your blog and done.

Hey Jack, I can do that, but i’m to lazy to do all that, can’t just give me any simpler way?



Oh yes of course. for you lazy boy, you can click on the button below, and just follow the instruction. yeah.. it’s easier for you lazy boy

But still, you need to edit the “http://YourBlogNameHere.blogspot.com” on the code with your own blog url.

Recent Posts on Blogger

Jack, I see that you have a Recent Post. Can I have that too for my blogspot / blogger blog?

Yes Sir, You can! If you are not too lazy. you can follow the steps above, just focus on the last line. we need to make some changing there.

There you’ll see that the script source is like this:

src="http://YourBlogNameHere.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"

see the word comment with green color there?

Comments means it will gives you list of comments. change it with posts if you want to have a list of your recent posts.

It should become like this:

src="http://YourBlogNameHere.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"

Oh and also don’t forget about the title, see <h2>RECENT COMMENTS</h2> there? You know what to do

Jack, I’m too lazy to…

ok.. ok.. here it is

And still, you need to edit the “http://YourBlogNameHere.blogspot.com” on the code with your own blog url.

Jack, I don’t like the result. it’s shown as a list. How can i modify it?

Oh.. I see that you are not that lazy

Ok, please just follow this steps carefully

1. Click this file. yes i mean this. The link will let you download the javascript file resource.

2. You would probably seen your browsers is asking you whether to open or to save the file. Choose to save it as wherever you want.

3. Open it with Notepad or your favorite editor. I use Textpad

4. The source would be like this;

//credit to hoctro

function rp(json) {

document.write('<ul>');for (var i = 0; i < numposts; i++) {

document.write('<li>');

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 == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

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";

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, "");

document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {

if (postcontent.length < numchars) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}

document.write('</li>');

}

document.write('</ul>');

}

There are some parameters you can use, they are:

var numposts = 10; /* How many posts do you want?

var showpostdate = false; /* DO you want us to show the date?

var showpostsummary = false; /* Do you want to show the post summary?

var numchars = 100; /* If you want to show the post summary, how many characters do you want to show?

5. There you’ll see that i have this lines inside

document.write('<ul>');document.write('<li>');

document.write('</li>');

document.write('</ul>');

Basically, the structure of the file is like this

function rp(json) {

HERE YOU CAN ADD ANYTHING YOU WANT, AS AN EXAMPLE IS TITLE

document.write('<ul>'); //This 2 line should keep together, without any text or whate-

(loop function start)

document.write('<li>'); // ver inside it. so don't put anything here.

------------------------------------------------------------------

HERE IS THE CONTENT.

YOUR CONTENT WOULD BE REPEATED HERE.

------------------------------------------------------------------

document.write('</li>');    //This 2 line should keep together, without any text or whate-

(loop function stop)

document.write('</ul>'); // ver inside it. so don't put anything here.

6. Here you can modify the result.

if you don’t like it’s shown on a list, you can delete all 4 lines. so it becomes like this

function rp(json) {

HERE YOU CAN ADD ANYTHING YOU WANT, AS AN EXAMPLE IS TITLE

document.write('<ul>'); //This 2 line should keep together, without any text or whate-

(loop function start)

document.write('<li>'); // ver inside it. so don't put anything here.

------------------------------------------------------------------

HERE IS THE CONTENT.

YOUR CONTENT WOULD BE REPEATED HERE.

------------------------------------------------------------------

document.write('</li>');    //This 2 line should keep together, without any text or whate- HERE YOU CAN ADD ANYTHING TO SEPARATE BETWEEN CONTENT RESULTS LINES. example <br/>

(loop function stop)

document.write('</ul>'); // ver inside it. so don't put anything here.

Just remember to always backup your original widget first if you want to do any changing or modifying on them.

Wish you luck and Have a nice try.