Fazer Pagina com Atualizações mais Recentes do Blog

Criar uma pagina mostrando as postagens mais recentes do seu blog podem ser muito úteis principalmente se você fez uma pagina inicial somente com uma imagem ou mensagem de boas vindas no seu blog como mostramos aqui: Fazer Pagina de Boas Vindas no Blog - Criar Pagina de Abertura, alias estamos fazendo esse tutorial por causa de comentários recebidos falando sobre qual pagina usar como link na abertura do blog então o melhor a fazer é uma pagina com as suas atualizações mais recentes do seu blog.

Você pode usar esse código em uma pagina extra do blogger ou em uma postagem normal. Então se quiser você pode colocar um texto curto e depois a lista com seus posts recentes ou usar somente o código das postagens recentes:

<script type="text/javascript">
numposts = 10
imgr = new Array();
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif";
showRandomImg = true;
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
icon2 = " ";
label = "";
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;
}
}
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
document.write('<a title="Leia mais..." style="display:block; text-decoration:none" href="'+posturl+'"><img style="float:left;margin-right:10px;border: dashed 1px #000" src="'+img[i]+'" width="140" height="110"/><p align="center"><font style="font-size:110%"'+posttitle+' '+cmtext+ '</font></p></a><p>'+icon2+removeHtmlTag(postcontent,200)+'...</p><div style="padding:25px;clear:both"><hr /></div>');
j++;
}
}
document.write("<script src=\"http://frasecurta.blogspot.com/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

São poucas as alterações no código das postagens recentes que precisará fazer veja aqui os trechos que precisa alterar:

imgr[0] = http://img185.imageshack.us/img185/6717/dicasg.gif : imagem que aparece caso seja uma postagem sem imagens, veja aqui: Miniaturas das Imagens não aparecem.

numposts = 10 quantidade de postagens que aparecem na pagina de postagens recentes.

img style="float:left;border:none;margin-right:10px;border: dashed 1px #000": posicionamento da miniatura da imagem do post. Se quiser do lado direito troque as palavras left e right de lugar isso muda a imagem de lado e deixa uma pequena margem para o texto não ficar encostado na imagem. O trecho border: dashed 1px #000 é a borda e se quiser pode apagar esse trecho ou veja outras opções para alterar as bordas.

width="140" height="110": tamanho da imagem: 140 largura e 110 altura, então altere como desejar.

+icon2+removeHtmlTag(postcontent,200): o numero 200 é a quantidade de caracteres do resumo da postagem que aparece.

script src=\"http://frasecurta.blogspot.com/feeds/posts/default?... endereço do seu blog no código. Altere somente o endereço do blog: http://frasecurta.blogspot.com o restante continua igual.

<div style="padding:25px;clear:both"><hr /></div>: esse trecho faz o espaço entre as postagens do blog portanto altere o numero 25 como desejar. A barra que aparece entre os posts é o código <hr /> se não gostou pode apagar e a barra desaparece.

E finalmente está tudo pronto apenas verifica nas opções da postagem se está marcada a opção Interpretar HTML digitado e agora é só publicar sua pagina de assuntos recentes. Este código funciona também em gadgets de html/javascript mas se utilizar em um gadget faça o teste a velocidade do seu blog: Medir a Velocidade de Blogs e Sites - Contador Google Analytics para saber se não deixou seu blog muito lento.

Queremos pedir atenção nos detalhes na hora de alterar os códigos muitas vezes apagamos um sinal qualquer por engano e isso faz o código não funcionar (Porque os códigos não funcionam no blog) portanto cuidado com aspas e outros sinais.

49 comentários :

  1. Muito util ... Vou usar no meu site em breve

    ResponderExcluir
  2. Eu quero colocar isso no lugar da postagem na pagina inicio, como faço isso ?

    ResponderExcluir
  3. Eu quero colocar isso no lugar da postagem na pagina inicio, como faço isso ?

    ResponderExcluir
  4. Angelo
    eu não tinha pensado nisso ainda, mas pode funcionar.

    então coloque o código deste tutorial no lugar da imagem do outro tutorial: Fazer Pagina de Boas Vindas no Blog - Criar Pagina de Abertura

    sei que parece confuso, mas não é. pegue o código da pagina de abertura mas em vez de colocar o código da imagem coloque o código deste tutorial.

    eu não testei mas acredito que funcione.

    muito boa idéia, gostei muito.

    ResponderExcluir
  5. Gostei muito vou usar agora

    ResponderExcluir
  6. Muito bom eu vou usar no meu blog, eu sei fazer de outras maneiras, mas essa se encaixa melhor.
    Não tem erros.
    Boa Dica!

    Mas tem como criar uma pagina com postagens populares?

    http://naruto-9tails.blogspot.com/

    ResponderExcluir
  7. Luiz Felipe
    igual ao gadget de postagens populares não tem como fazer, mas você pode criar uma pagina com as Postagens mais comentadas

    ResponderExcluir
  8. Ola Fabiano, podias-nos ensianar a criar um tema para blogspot explicando as tags e tudo???

    ResponderExcluir
  9. Anônimo não tem como fazer um guia para criar template porque ficaria longo demais. são muitas tags no blog e variam conforme o template (novo ou antigo) por isso fazemos tutorial mostrando como alterar trechos do html e assim aos poucos conseguimos falar sobre praticamente tudo

    ResponderExcluir
  10. Olá, coloquei na pagina inicial do Blog (www.ministerioceo.com.br) mas quando tem acento nas palavras ele dá aqueles erros, que no caso eu deveria substituir pelo código do acento em HTML, mas não existe uma forma mais fácil para que eu concerte o problema?

    ResponderExcluir
  11. Ministério CEO Online
    não sei porque aconteceu esse erro com os acentos no seu blog.

    veja nossa pagina de postagens recentes nós utilizamos o mesmo código e funcionou perfeitamente

    ResponderExcluir
  12. aaaa mais como eu amo esse site kkkk

    ResponderExcluir
  13. Muito obrigado Fabiano Roberto, agora sim meu blog está ótimo! :)

    ResponderExcluir
  14. Fabiano tem como alterar, colocar as postagens para aparecer uma do lado da outra ao invés de uma embaixo da outra?

    ResponderExcluir
  15. Rosiel T.S.
    tem como fazer mas vou publicar um tutorial sobre isso pois são varias alterações no código e ficaria complicado explicar tudo num comentários

    ResponderExcluir
  16. Obrigado Fabiano, vou ficar esperando.

    ResponderExcluir
  17. Fabiano eu consegui colocar para as postagens aparecer uma do lado da outra olha nesse blog de teste http://rascunhoplantaohiphop.blogspot.com.br/ mas você sabe um jeito de colocar o título das postagens em cima das fotos?

    ResponderExcluir
  18. Fabiano tem como colocar esse código para ser as postagens padrão do blog?

    ResponderExcluir
  19. Rosiel T.S. você poderia usar o código deste tutorial: Fazer Pagina de Boas Vindas no Blog - Criar Pagina de Abertura

    mas em vez de usar o código da imagem como está lá use o código que mostramos aqui para fazer as postagens recentes

    ResponderExcluir
  20. fabiano, eu sou novo em relação a blogs e criei recentemente um blog http://maranata-vemjesus.blogspot.com/ so que eu fui tentar fazer uma pagina com as atualizações mais recentes do blog como ta explicando no seu site. segui tudo que tava aqui no seu site so que na hora de eu pré visualizar, não apareceu nada. por que?

    ResponderExcluir
  21. veja se não faltou ou sobrou nada neste trecho

    pt src=\"http://frasecurta.blogspot.com/feeds/posts/default?ma

    é para trocar só o endereço do blog frasecurta.blogspot.com

    o restante fica igual

    ResponderExcluir
  22. Tem como substituir o "hr" por uma imagem pequena para separar as postagens?

    ResponderExcluir
  23. é possivel trocar o < hr > por uma imagem só precisa colocar o código no mesmo lugar.

    o código da imagem é igual a de um banner comum

    ResponderExcluir
  24. Fabiano, muito obrigado. Os tutoriais do D.B's me ajudaram muito. Parabéns a todos os envolvidos!

    ResponderExcluir
  25. Olá Fabiano,


    Tem como fazer aparecer as setas"recente"e "Antigo"quando o número de postagens determinadas na página chegar? Deu tudo certo aqui, mas só aparce a seta "início".

    ResponderExcluir
  26. COMO EU TIRO AS LINHAS ----?

    ResponderExcluir
  27. apague o trecho border: dashed 1px

    ResponderExcluir
  28. Muito boa a dica cara, mas tipo há como deixar as postagens aparecerem lado a lado, tipo elas ocupam 100% da área de postagem ficando uma abaixo da outra. Teria como diminuir essa dimensão para que elas fiquem lado a lado?

    ResponderExcluir
  29. precisa fazer varias adaptações no código, vou fazer uns testes e se possivel publicar um tutorial sobre o assunto

    ResponderExcluir
  30. Fabiano eu consegui colocar lado a lado, eu coloquei esse código

    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
    <div class='galeria'><a expr:href='data:post.url' expr:title='data:post.title'><img expr:src='data:post.thumbnailUrl' height='195' style='float:left;margin-right:0px' width='195'/>
    </a></div>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

    no lugar de

    <b:include data='post' name='post'/>

    mas só não consegui um jeito de colocar o título da postagem embaixo ou em cima das fotos, você consegue fazer isso?

    ResponderExcluir
  31. o grande problema é que o tamanho do titulo varia muito...

    então precisa deixar uma espaço maior em vez de 195, tanto faz se mais largo ou mais alto

    ResponderExcluir
  32. nao deu certo no meu blog ficou tudo branco e so -'

    ResponderExcluir
  33. Tem como fazê-lo funcionar apenas com um marcador?

    ResponderExcluir
  34. Tem como fazê-lo funcionar com apenas um marcador? Coloco algumas notícias em meu blog, gostaria que só elas aparecessem nessa página de recentes.

    Eu poderia usar o link do próprio marcador no menu, mas dessa forma não posso escrever algo a mais na página.

    ResponderExcluir
  35. deu certo valeu a pena tentar denovo

    ResponderExcluir
  36. Agatha veja se colocou o endereço do seu blog nesta linha

    script src=\"http://frasecurta.blogspot.com/feeds/posts/default?.....

    e cuidado com os sinais " / para não deixar duplicado ou faltando

    ResponderExcluir
  37. tente usar desta forma o endereço do blog
    Rafael
    use desta forma o endereço do blog

    http://frasecurta.blogspot.com/feeds/posts/default/-/Sites Úteis?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentpo.........

    http://frasecurta.blogspot.com/feeds/posts/default/-/Amor

    Amor é o marcador do Frases curtas:
    http://www.frasescurtas.com.br/search/label/Amor

    mas tem que escrever exatamente igual o nome do seu marcador inclusive a letra maiúscula.

    no exemplo acima se escrever amor com letra minuscula não funciona

    ResponderExcluir
  38. Olá Fabiano,


    Finalmente eu ia abrir meu blog, mas não estou conseguindo fazer a tela de abertura, quando clicada ir para a nova tela que eu criei. Não era só substituir o endereço "algumacoisa.com.br" por "algumacoisa.com.br/p/home.html"?

    ResponderExcluir
  39. mas precisa criar essa pagina de abertura (algumacoisa.com.br/p/home.html) e quando for colocar o link na imagem tem que usar o http:// no começo do link senão pode dar erro, ou seja o endereço para usar no link seria

    http://algumacoisa.com.br/p/home.html

    ResponderExcluir
  40. Há alguma forma de adicionar o autor da postagem aí também? tentei de algumas formas mas não consegui.
    Fico no aguardo!
    obrigada

    ResponderExcluir
  41. Camila você usa uma foto no seu perfil? para a foto do autor aparecer nos resultados do google tem que ser um rosto.

    veja aqui: Mostrar Nome e Foto do Autor do Blog nos Resultados do Google

    ResponderExcluir
  42. Seria apenas o nome.

    Tem como também limitar o número de caracteres do título da postagem? Estou fazendo uma adaptação, está ficando assim: http://prntscr.com/1uj2z4 e podendo limitar isso eu teria como centralizar o título.

    obrigada!

    ResponderExcluir
  43. Camila Cavalcanti

    acho que não tem como limitar o tamanho do titulo.

    quando você fala em centralizar o titulo está querendo colocar o titulo acima ou abaixo da imagem? Porque na imagem que você usou como exemplo o titulo já está centralizado.

    ResponderExcluir
  44. eu estava tentando centralizar o nome verticalmente - não queria por margin pela variação no tamanho dos títulos.
    mas descobri um erro maior que está me impedindo de colocar esses destaques. quando estou na pagina de layout, algo fica por cima e não posso mudar ou adicionar um gadget novo em determinada área '-'
    dei uma desistida por um tempo pra ver se resolvo isso! conhece algum caso parecido?! :/
    obrigada pelas respostas! :)

    ResponderExcluir
  45. Camila centralizar verticalmente? acho que está querendo dizer horizontalmente....

    mas em qualquer dos casos como você mesma disse não tem como resolver problemas causados pela diferença de tamanho dos títulos pois a formatação (posicionamento) é feito para todos os títulos usando CSS.

    ResponderExcluir
  46. Gonçalo Gaspar05 outubro, 2014 12:50

    Boas.

    Em fiz tudo o que mandou e quando publico a página ela aparece toda branca, sem informação nenhuma. Alterei o link para o link do meu blog... penso que fiz tudo certo. Eu coloquei o código na parte do html da página no blogger...

    Agradecia ajuda

    ResponderExcluir
  47. vou testar o código mas se for algum arquivo externo com problema então não tem como corrigir

    ResponderExcluir