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 recentes porque 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.

comentários recentes do blog
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.

25 comentários :

  1. Olá Fabiano. Inseri a página de comentários no meu blog como vc ensinou, mas não aparecem os comentários já feitos. Como corrigir?
    Obrigada.

    ResponderExcluir
  2. parece que a pagina de postagem do blogger está danificando o código, vou fazer mais alguns testes, mas quando criei minha pagina de comentarios recentes funcionou perfeitamente e além desta criamos também em nosso outro site: Frases Curtas

    ResponderExcluir
  3. Fabiano Roberto testei e deu certo, a unica coisa, é que tem que adicionar o código no formato HTML, dai quando voce edita o post tem que colar o código de novo, porque o blogger edita mesmo.

    ResponderExcluir
  4. Olá, Ultimamente terminei o Banner do meu Blog,e a imagem, nos meus documentos está perfeita, mas quando colocada no Blog, fica toda embaçada e perde nitidez. Outros Blogueiros também tiveram o mesmo problema.
    Oque eu poço fazer pra imagem ficar igual aos meus documentos?

    ResponderExcluir
  5. Luciana
    fiz os testes e notei que esse código só funciona nas paginas extras do blogger se fizer uma postagem normal não dá certo, veja aqui sobre Paginas extras para o Blogspot

    ResponderExcluir
  6. Fernanda A.
    tem que ver se o tamanho da imagem que está usando no seu blog, se ela for muito grande será reduzida e pode perder qualidade, o mesmo vale para o formato procure salvar como .jpg ou .gif

    ResponderExcluir
  7. Olá! Criando a página no blogger em rascunho deu certo. Obrigada.

    ResponderExcluir
  8. Realmente, como o Emanoel disse, cada vez que se edita a página tem que colocar o código novamente.

    ResponderExcluir
  9. as duas vezes que usei esse código foi em paginas extras, sinceramente não tinha notado que numa postagem normal dava erro

    ResponderExcluir
  10. Tentei fazer isso
    e sinceramente não deu certo =/
    Mas obrigada pela atenção mesmo assim

    ResponderExcluir
  11. Alberto.

    Boa noite, Fabiano. Queria tirar uma dúvida sobre aquele post, de como retirar o nome "disse" do lado do autor do comentário. Bom, selecionei a opção "Janela Pop-Out", fiz o que voçê explicou no tutorial, más não deu certo e o nome disso ainda continuava. Isso só funciona com a postagem embaixo, incoprporada??

    Até.

    ResponderExcluir
  12. Anônimo este tutorial foi testado apenas quando os comentários ficam embaixo da postagem. mude o seu para isso e tente fazê-lo.

    ResponderExcluir
  13. Fabiano me dá um help.
    como faço para trocar a cor do fundo do comentário selecionado. Eu utilizo fonte branca e gostaria de colocar o fundo preto.
    já miche na parte display e nada, me ajuda aiH.

    Valew pelas dicas, Abraço!

    ResponderExcluir
  14. Anonimo

    na primeira linha
    comentarios a{display: block;.... você pode colocar color:#000000;

    isso é a cor do texto, veja neste link o Código das Cores

    ResponderExcluir
  15. Fiquei na dúvida se devo clocar esse Código no HTML do Blog ou se numa página HTML Separada

    ResponderExcluir
  16. A.B.
    você pode usar esse código em um gadget de html/javascript ou em uma pagina extra do blogger

    ResponderExcluir
  17. Fabiano, optei por uma página extra, ainda me restam duas dúvidas:
    1- nas configurações do Blog como devo configurar os comentários ?
    2- A Janela para fazer os comentários aparecerá em cada postagem ou na página extra que coloquei o código ?
    Obrigado

    ResponderExcluir
  18. Fabiano...
    já resolvi o problema acima, tive que fazer algumas adaptações e gostaria de compartilhar com seus seguidores:

    1º passo: Eu havia colocado um Script para transformar de blogspot.com.br para blogspot.com então tive que incluir antes do ...(document.write...) o seguinte :

    if ((window.location.href.toString().indexOf('.com.br/'))>'1') {
    window.location.href=window.location.href.toString().replace('.blogspot.com.br/','.blogspot.com/ncr/');
    }

    2º Passo: foi para resolver um problema do Google Chrome que hora mostrava o Link para fazer o Comentário hora não mostrava, então copiei o endereço do Link e acrescentei a seguinte linha no código dessa forma a opção aparece sempre : (trata-se de um exemplo)

    ResponderExcluir
  19. só precisa modificar o endereço do seu blog neste trecho

    script src=\"http://www.dicasparablogs.com.br/feeds/comments/default?max-results=


    se usar o código na pagina extra ele só aparecerá nela como se fosse uma postagem comum.

    ResponderExcluir
  20. SIMPLES: COLE O CÓDIGO COM O EDITOR DE PÁGINAS DO BLOGGER EM HTML NÃO ALTERE EM MOMENTO ALGUM PARA "Escrever" - MUDE O ENDEREÇO DO SITE/BLOGGER PUBLIQUE É PRONTO!
    O problema acontece quando você altera entre "Escrever" e "HTML" no editor de páginas do Blogger.
    VEJA: http://www.coisasdesocorro.net/p/comentarios-recentes.html

    ResponderExcluir