Assine nosso Feed


Melhores Dicas para Blogueiros

Passe o mouse e veja qual o assunto do tutorial de cada imagem

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. Related Posts with Thumbnails
Link desta página
Comentários
19 Comentários

19 Comentários:

Luciana disse...

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.

Fabiano Roberto disse...

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

»Emanoel.3D« disse...

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.

Fernanda A. disse...

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?

Fabiano Roberto disse...

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

Fabiano Roberto disse...

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

Luciana disse...

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

Luciana disse...

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

Fabiano Roberto disse...

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

Fernanda A. disse...

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

Anônimo disse...

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é.

Fabiano Roberto disse...

então tente procurar aquele trecho novamente no seu html

Mudar o Texto disse.. ao lado do Nome do Autor do Comentário

Luis Henriques disse...

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

José Azevedo disse...

Valeu pelas dicas,
Obrigado!

CT ARTES MARCIAIS disse...

massa!!!

Anônimo disse...

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!

Fabiano Roberto disse...

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

Admin disse...

valeu, funcionou certinho

Anônimo disse...

legal...

Postar um comentário