Página com os Comentários Recentes do Blogger

Modificamos o código feito para Criar um Índice do blog para mostrar os comentários recentes do blog em uma pagina (postagem) separada. Achamos esse sistema melhor do que adicionar um gadget com os comentários recentesporque o gadget faz o blog ficar mais lento (demora para carregar a pagina) devido ao uso de mais códigos. (veja Fazer um Blog mais Rápido)

E usando uma pagina extra para mostrar os comentários recentes do blog você pode colocar um link no seu menu ou sidebar e quem desejar pode clicar no link e ver sua pagina de comentários.


O código é o seguinte:

<style type="text/css">
.comentarios a{display: block;margin: 20px;border: 1px dashed #000;padding: 3px;}
.comentarios a:hover{border: 1px solid #F00;background-color: #FFC;}
</style>
<div class="comentarios"><script type="text/javascript">
numposts = 20
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
showRandomImg = true;
tablewidth = 500;
cellspacing = 0;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 100;
imgheight = 100;
fntsize = 16;
acolor = "#ff0000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#0000ff";
icon2 = " ";
label = "";
</script><br />
<script type="text/javascript">
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();
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><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 daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
var trtd = '<a href="'+posturl+'" style="display:block" title="Veja o comentário e o tutorial completos">'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</a>';
if(summaryPost == 0) { trtd = '<p><a href="'+posturl+'">'+posttitle+'</a> '+cmtext+ ' ' + daystr + ''; }
document.write(trtd);
j++;
}
}
document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/comments/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>

Veja quais partes do código você pode ou deve alterar:

....document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/comments/default?max-results=".... - coloque o endereço do seu blog

numposts = 20 numero de comentários exibidos (máximo 20)

summaryPost = 150 quantidade de letras mostradas em cada comentário

Então faça essas alterações e pronto, se quiser pode formatar o estilo (aparência) do texto alterando o estilo CSS:
.comentarios a{display: block;margin: 20px;border: 1px dashed #000;padding: 3px;}
.comentarios a:hover{border: 1px solid #F00;background-color: #FFC;}

Veja aqui alguns links uteis para formatar os links:

Fazer Menu com Imagens ao lado dos Links
Como Formatar o Texto do Blog
Colocar ou alterar as bordas

Fizemos esse tutorial para responder uma duvida de um de nossos visitantes sobre nossa pagina de comentários recentes, uma vez que usamos esse sistema nada mais justo do que compartilhar com os outros blogueiros. Você pode ver aqui demostração desta pagina com comentários recentes.