Mostrar os Titulos dos Posts e Miniaturas das Imagens

Recebemos um comentário pedindo para falar sobre como fazer uma pagina mostrando os marcadores do blog, mas exibindo apenas os títulos das postagens e uma miniatura da imagem publicada, então fizemos uma adaptação de outro código utilizado para Lista aleatória das postagens recentes do blog.

Mas o código que vamos mostrar pode ser utilizado também para mostrar uma lista de seus posts mais recentes com as miniaturas das imagens ao lado dos títulos das postagens, como fazemos em nossa pagina de postagens recentes.

Esse código pode ser utilizado numa das paginas extras do seu blog ou até mesmo em um gadget de HTML/javascript, porém é mais recomendado utilizar como uma pagina senão pode fazer seu blog ficar mais lento devido ao tempo para carregar os códigos e imagens.

Adicione uma pagina extra no seu blog e coloque o seguinte código:

<style type="text/css">
.arquivos a{color: #000000;padding: 5px;margin: 20px 5px; border: 1px solid #999;}
.arquivos a:hover{color: #009;border: 1px dashed #000;background-color: #FFC;}
</style> <div class="arquivos"><script type="text/javascript">
numposts = 5
imgr = new Array();
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif";
showRandomImg = true;
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 60;
summaryColor = "#0000ff";
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;border:none;margin-right:5px" src="'+img[i]+'" width="80" height="80"/><font style="font-size:120%"'+posttitle+' '+cmtext+ '</font><br/><div style="clear:both"></div></a>');
j++;
}
}
document.write("<script src=\"http://www.frasescurtas.com.br/feeds/posts/default/-/Auto Ajuda?start-index=1&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>

Você precisa alterar algumas partes do código para configurar o seu blog neste javascript:

Aparência dos links
.arquivos a{color: #000000;padding: 5px;margin: 20px 5px;border: 1px solid #999;}
.arquivos a:hover{color: #009;border: 1px dashed #000;background-color: #FFC;}

Isso é uma formatação em CSS normal, você pode ver aqui mais detalhes sobre: Alterar cores dos links - CSS e assim poderá mudar a aparência para que combine melhor com seu layout.

Quantidade de Posts Mostrados:
numposts = 5 – apenas altere o numero 5 para a quantidade que desejar, claro desde que tenha postagens suficientes neste marcador.

Postagens sem imagens
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif"; aqui você deve colocar um endereço de imagem para utilizar se o post não tiver imagens, ou seja, ela só parece se não houver miniatura disponível. Caso tenha duvidas sobre o endereço da imagem, veja aqui: Imagem não aparece no Blog ou Site

Endereço do Blog ou do Marcador
<script src=\"http://www.dicasparablogs.com.br/feeds/posts/default/-/Imagem de Fundo?start-index=1&orderby=published&alt=json-in-script&callback=showrecentposts

Tenha muito cuidado para alterar esse código, pois qualquer diferença ele não funciona, inclusive as letras maiúsculas no nome do marcador. Portanto altere o trecho:
http://www.frasescurtas.com.br/feeds/posts/default/-/Auto Ajuda

Assim por exemplo:
http://www.dicasparablogs.com.br/feeds/posts/default/-/Imagem de Fundo

Tamanho da miniatura ao lado do titulo do post
width="80" height="80" simplesmente altere esses valores como quiser, lembrando que width é largura e height é altura da imagem.


Uma coisa importante sobre esse código é que para utilizar em uma postagem ou pagina extra, veja na pagina de criar postagens a configuração opções, ela deve estar marcado para Interpretar HTML digitado e não Mostrar HTML literalmente.

Veja outras formas de mostrar links de outras postagens no seu blog e assim fazer as pessoas ficarem mais tempo em suas paginas:

LinkWithin - Mostrar assuntos relacionados no blog
Outbrain - Classificação com estrelas nas postagens
E também como resolver o problema das Miniaturas das Imagens não aparecem

Esperamos que gostem e achem boas utilidades para esse código no seu blogger. Lembramos apenas que caso resolva utilizar isso como um gadget ele deixará a pagina do seu blog um pouco mais lento.

68 comentários :

  1. Dá pra fazer isso em todos os post's?

    ResponderExcluir
  2. ives x)
    sim, você pode usar com o feed normal do seu blog e aparecerá suas postagens recentes

    então o trecho do código com endereço fica assim:

    http://www.frasescurtas.com.br/feeds/posts/default?start-index=1

    ResponderExcluir
  3. ola tdb desculpa fazer uma pergunta fora do assunto, e que eu queria saber se vocês poderia fazer um post sobre como colocar uma imagem no fundo dos títulos do post! eu acredito q e uma coisa simples mais só que eu coloquei um gif ao lado dos posts mas só q tenho medo que cubra o gif se possível confira meu blog http://animangacenterbrasil.blogspot.com/

    ResponderExcluir
  4. Randromedo

    veja esse link Imagem no título da postagem

    lá mostra como colocar ao lado, mas como é uma imagem de fundo é só mudar os valores de posicionamento...

    mas cuidado para não ficar ruim de ler os titulos

    ResponderExcluir
  5. Fabiano você é o cara... Vou testar aqui!
    Valew!!!

    Felipe Argôlo.

    ResponderExcluir
  6. Fabiano, extra, extra, extra, o Blogger aumentou a quantidade de paginas extras de 10 para 20, acabei de ver aqui, notícia nova, confere ai.

    via Felipe Argôlo

    ResponderExcluir
  7. Muito bom ótima dica você é fera.

    ResponderExcluir
  8. E aê galera muito bom esse post.

    Tem novidade no Designer do modelo do Blogger.
    segui o link http://googleblog.blogspot.com/2011/09/dynamic-views-seven-new-ways-to-share.html

    ResponderExcluir
  9. Tem um espaço branco na vertical no direito do meu blog, não sei como isso apareceu, tipo carrega a página, e se você mover a página pro lado, aparece um espaço em branco, da uma olhada por favor

    ResponderExcluir
  10. Ariel
    seu template é bem modificado... não tenho como responder onde está o erro sem fazer testes nele...

    mas quando entrei não vi o tal espaço

    ResponderExcluir
  11. valdemir achei legal as formas de visualizar o blog... vou escrever sobre isso logo...

    www.obomdoacupe.com
    legal, muita gente estava querendo mais paginas extras

    ResponderExcluir
  12. Olá de novo Fabiano! Eu gostaria, que, por favor, você fizesse uma postagem explicando 2 coisas que tenho duvida: Como limitar a quantidade de caracteres nos comentários e também explicar como você fez para a pesquisa personalizada deste blog, abrir-lo em outra pagina!

    Muito grato, Igor

    ResponderExcluir
  13. Desculpe tbm pelo comentário fora do contexto mas pq não dá compartilhar postagem do blogger em redes sociais, sabe esses dias venho tentando clicar nos botões de compartilhamento pra mostrar no face orkut, etc e dá erro pq?

    ResponderExcluir
  14. Iguinho__- HQ
    sobre limitar o numero de caracteres nos comentários acho que não é possível

    sobre a pesquisa abrir em outra pagina é só configurar isso no adsense: Busca dentro do blog - AdSense para pesquisas



    Lady_Death_Six³
    veja aqui Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais

    quais botões usou? teste aqui em nosso blog parece que está funcionando normalmente...

    menos o orkut que as vezes dá erro, mas infelizmente não tem como resolver

    ResponderExcluir
  15. o robots do meu outro site, uma parte ta assim:

    User-agent: *
    Disallow: /search
    Allow: /

    e o google atualizou meu site no dia 20 de setembro, hoje ja é dia 28 ...

    ResponderExcluir
  16. Caro amigo, quero parabenizá-lo pela ótima ferramenta que vc disponibiliza para pesquisa e aprendizado. Obrigado

    ResponderExcluir
  17. Ariel

    o blogger tem um arquivo para não rastrear as paginas dos marcadores... para evitar o conteudo duplicado, veja aqui: Erros na Indexação do Blog - Restringido por robots.txt

    ResponderExcluir
  18. Oi, Fabiano, desculpe não ter nada a ver com o post, mas você já viu que o Blogger dobrou a quantidade de páginas estáticas disponíveis? Agora podem ser criadas até 20 páginas. Abraço.

    ResponderExcluir
  19. olá tudo bem posso lhe perdir uma ajuda como eu faço para executar isto certinho no meu blogger, pois sei fazer com que execute flash nas potagens do meu blogger mais não consigo fazer com que este fucione todo que peça a camera etc http://www.cartoonnetwork.it/advertiser/it/lamincards-new/swf11.swf
    você conheçe por exemplo algum codigo executor poderoso hehe que faça ele pegar certinho

    ResponderExcluir
  20. talvez o blogger tenha algum tipo de bloqueio para camera... ou algo assim...

    tente usar esse código

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="114">
    <param name="movie" value="http://img528.imageshack.us/img528/8470/tigrevs5.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="http://img528.imageshack.us/img528/8470/tigrevs5.swf" width="150" height="114" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></object>


    mas claro usando o seu arquivo de flash

    ResponderExcluir
  21. Obg pela explicação deve ser erro mesmo pois outros blogs tbm estão com esse problema, eu uso os botões do blogger mesmo

    ResponderExcluir
  22. Fabiano Roberto muito obrigado por tentar mim ajudar, mesmo assim não fucionou, desculpa ai por te encomoda com isso, acho melhor não fica tentando fazer fogo gerar de baixo d'agua, se o blogger não quer pegar de jeito nenhum é melhor desistir continue fazendo otimas postagens adoro o blogger

    ResponderExcluir
  23. Pesoal quem sabe ai como colocar uma imagem antes de abrir a pagina principal do meu blog. tipo assim: aparece a imagem dizendo abrir esse blog/site.
    me ajudem ai por favor e parabéns pelo blog de dicas, o que seria os blogueiros sem esse site. valeu mesmo.

    ResponderExcluir
  24. não tem como colocar uma imagem ou pagina de abertura no blogger

    ResponderExcluir
  25. Ola Fabiano, no nosso blog de ficção ,não esta aparecendo as miniaturas em slide(titulo é MAIS POSTAGENS AQUI) logo abaixo das postagens,fiz direitinho como voce indicou, além disto o linkwithin também sumiu,estava com erro de feed arrumei e mesmo assim continuou...existe alguma maneira de eu achar erros de HTML?...acredito que esta ai o problema...valeu...fuiiii

    ResponderExcluir
  26. moreijo
    pode tentar retirar os códigos e pegar novamente no site do linkwithin ou qualquer outro que dê problemas...

    ou se a sua pagina tem muitos scripts, imagens, videos ... retirar algumas coisas paginas pesadas demais tem mais chances de dar erro


    mas achar falhas no html... só fazendo testes, retirando alguns techos, visualizando o blog...

    tente olhar se falta algo no código, sinais / < : = ' > ... ou qualquer outra coisa assim, geralmente é um detalhe que está errado

    ResponderExcluir
  27. em cada post que eu fizer tenho que adicionar uma pagina nova e colocar esse codigo?

    ResponderExcluir
  28. Anynha
    esse código atualiza automaticamente... suas novas postagens aparecem nele sem você alterar nada, é como nossa pagina de Atualizações Recentes

    só postamos o código uma vez e não mexemos mais

    ResponderExcluir
  29. ola,aqui funcionou,só que o tamanho das miniaturas não querem mudar,só fica em 80 x 80,já troquei,exclui o código todo depois coloquei de novo e nada.
    As miniaturas estão muito pequenas.

    ResponderExcluir
  30. Pode me ajudar a resolver os problemas do tamanho das miniaturas?

    ResponderExcluir
  31. Gabriel
    neste trecho do código você altera o tamanho da miniatura

    width="80" height="80"/

    está quase no final

    ResponderExcluir
  32. gente estou precisando de dicas para meu blog, preciso colocar as postagens e são muitas e gostaria de saber como faço para coloca-las em sequencia so com o nome da postagem como um link e nao sei como fazar para elas não apareçer grande

    ResponderExcluir
  33. aqui tem um codigo Criar um Índice do blog - Mostrar links de todos os posts

    mas isso deixa o blog lento é melhor usar em uma pagina extra do blogger

    ResponderExcluir
  34. Apliquei a técnica e funcionou perfeitamente. Gostaria de saber se há como colocar em ordem alfabética ao invés de cronológica, pois gostaria de aplicar ao marcador "Li",que se refere a livros.

    Quero também parabenizar o site, sou blogueira iniciante mas já usei mais de 10 dicas no meu blog e consigo tirar todas as dúvidas restantes com esse simples mas eficiente espaço de comentários.Caso queira visitar o espaço que ajudou a construir indiretamente, é o http://www.arquivopassional.com/
    Grata.Elis.

    ResponderExcluir
  35. Bom dia!
    estou com um problema com essas miniaturas.
    Quando compartilho no facebook, por exemplo: o facebook carrega praticamente todas as imagens do blog e as vezes não aparece a miniatura relacionada ao post :T logo as pessoas que compartilham, compartilham o post e vai uma imagem nada a ver :T
    Queria saber como resolver este problema :T
    Obrigada!

    ResponderExcluir
  36. @@nlembronfiz não sei como resolver o problema

    em alguns blogs o botão do facebook gera alguns erros na hora de pegar o resumo ou imagens

    ResponderExcluir
  37. Eu gostaria de saber, como criar páginas no blog, até tentei mas no fim acabou o arquivo do blog ao inves de umas guias, não sei se consegui explicar direito mas assim mesmo, vlw

    ResponderExcluir
  38. @*Caroline Mor* não entendi sua pergunta

    você quer criar paginas extras? mas qual a finalidade?

    ResponderExcluir
  39. Olá, Fabiano! Tem como fazer um destes com "posts mais visitados" em vez de "posts recentes"? O que eu teria que mudar no código?

    ResponderExcluir
  40. @Lua tem um gadget de postagens mais visitadas

    entre na pagina layout > adicionar gadget e procure por postagens populares

    ResponderExcluir
  41. Esse recurso eu já conheço. Utilizei por muito tempo, inclusive. É que não quero mais gadgets na minha página. Queria poder transformar o "postagens populares" em uma página independente.

    ResponderExcluir
  42. @Lua as postagens populares não tem jeito mas pode fazer com as postagens mais comentadas, veja o código aqui: Postagens mais comentadas


    é só usar esse código em uma pagina extra do blog

    ResponderExcluir
  43. Puxa, que pena! Mas agradeço assim mesmo, Fabiano. E vou dar uma olhadinha nessa sua sugestão. Valeu mesmo!

    Ahh, muito bacana este espaço e a atenciosidade do dono dele também. =)

    ResponderExcluir
  44. Fabiano, grato por esse tutorial!

    Gostaria de saber se dá pra colocar titulo abaixo da imagem e aumentar o numero de imagens na mesma linha. Parecido com a aparência do LinkWithin...

    grato!

    ResponderExcluir
  45. Fabiano. Estou precisando de uma ajuda sua. Gostaria de saber se existe a possibilidade dessa lista ser alinhada horizontalmente, lado a lado, e como eu deveria fazer isto. Desde já agradeço muito sua ajuda.

    Felipe Argôlo.

    ResponderExcluir
  46. Fabiano, obrigado pela atenção.
    Eu já consegui fazer o que queria.
    Se for de seu interesse fiz a seguinte modificação no código:

    EXCLUI A PARTE: <br/><div style="clear:both"></div>

    Valew,
    Felipe Argôlo.

    ResponderExcluir
  47. Fabiano Roberto eu tetei colocar esse código depois do código:

    Pra ver se ficava incorporado na postagem não tive secesso(deu ERRO),tentei mas uma vez fui no site Paser HTML que vc já indicou aqui em uma outra postagem(pra transformar de HTML para o código compativel com o código),tambem não deu certo.
    Minha dúvid>é possivel fazer isso que eu quero? incorporar esse código no template do meu blog.
    OBRIGADO

    ResponderExcluir
  48. tente colocar o codigo no bloco de notas antes de colocar no seu blog.

    alguns códigos geram erros copiados de uma pagina diretamente para outra

    ResponderExcluir
  49. Fabiano Roberto como vc sabe esse código q vc passou pra gente as postagens(miniaturas) ficam juntas separadas apenas por uma linha>a pergunta>tem como dar um espaço entre as miniaturas???mantendo as linhas de divisão(ou seja quadros individuais,separados por um pequeno espaço).TEm algum código??Passe aí se tiver.

    ResponderExcluir
  50. Fabiano ROberto fiz o q vc mandou e nada,só apareceu isso ");
    Por que será??.....

    ResponderExcluir
  51. veja neste trecho

    ont-size:120%"'+posttitle+' '+cmtext+ '</font><br/><div style="clear:both"></div></a>

    altere assim:
    <div style="clear:both;padding:2px">


    além disso pode aumentar o valor padding neste trecho (fica no inicio do código)

    arquivos a{color: #000000;padding: 5px;margin: 20px 5px; border: 1px solid #999;
    isso deve criar um espaço embaixo da imagem

    ResponderExcluir
  52. Isso mesmo cara deu certo como sempre obrigado

    ResponderExcluir
  53. fabiano: como mudar o estilo da fonte do título? mudar para Oswald...

    ResponderExcluir
  54. nesta linha você pode alterar o estilo da fonte

    .arquivos a{color: #000000;padding: 5px;margin: 20px 5px; border: 1px solid #999;}

    veja mais detalhes aqui:
    Usar outros Tipos de Fontes (letras) no Blog

    ResponderExcluir
  55. Fabiano... eu mudei a fonte na linha indicada, mas o código está pegando o estilo da fonte do próprio template...o que fazer? www.portalinubia.com

    ResponderExcluir
  56. outra coisa que acontece é que quando coloco o código em varias partes do template o que eu mudo em um modifica todos

    ResponderExcluir
  57. quando usa estilos CSS (.arquivos a{color....)

    ele funciona em todos os lugares da sua pagina que usar uma div ou qualquer outra coisa com o nome deste estilo: arquivos

    sobre usar a fonte que tem no blog se você colocar o nome de uma fonte que não esteja disponível seu computador vai substituir por outro, por esse motivo deve usar fontes mais comuns que todos tem.

    ResponderExcluir
  58. Então Fernando...gostaria de algo desse tipo da imagem abaixo ..pra colocar no blogger...já fiz igual ..só que a cor não fica independente..tem algoq eu eui possa fazer isso?
    https://lh4.googleusercontent.com/-Gg9Q1yrn6vI/UMsxNT2fxTI/AAAAAAAADrI/hKfwRoQI0js/h120/Nova+Imagem.JPG

    ResponderExcluir
  59. Ola fernando muito bom seu artigo coloquei no meu blog http://azboxfullhdtv.blogspot.com.br/, mas não consigo fazer exibir as minhas postagens como está a suas. Poderia ajudar por gentileza.

    ResponderExcluir
  60. deve ter feito alguma alteração errada nos código.

    infelizmente qualquer detalhe gera erro, por exemplo uma letra ou sinal faltando ou sobrando

    ResponderExcluir
  61. Ola Fabiano. Tudo bem? Queria saber se eu usar esse código no tutorial "Fazer Pagina de Boas Vindas no Blog - CriarPagina de Abertura" da certo? E se der como eu tenho que alterar? Desde de já obrigado. Abraço!

    ResponderExcluir
  62. o código funciona, mas ele é a pagina inicial do blog, se alguém entrar pela pagina de um post então não verá sua pagina de abertura

    ResponderExcluir
  63. Obrigado. Mas eu queria saber se dar pra fazer gadget gerado por esse código ser a minha página de abertura (página inicial) ?

    ResponderExcluir
  64. acho que na pagina inicial fica melhor o resumo da postagem do que esse código por causa da indexação do google entre outras coisas

    ResponderExcluir
  65. Cara tem como exibir na horizontal e com um resumo do post?

    Estou precisando muito...

    ResponderExcluir
  66. BrunoWeb
    veja esse link:
    Barra com Botões Curtir, Google +, Retweet e Hack Leia mais

    lá você poderia usar um menu horizontal em vez dos botões curtir, retweet....

    ResponderExcluir
  67. Estou com problemas ao compartilhar uma postagem do meu blog no facebook e no google+, pois não aparece a miniatura da postagem. Aparece outras miniaturas que não tem nada haver a com a postagem. Eu li em um site que pode ser por causa do WLW. Como posso resolver este problema?

    ResponderExcluir
    Respostas
    1. em alguns casos o botão compartilhar erra a imagem por causa das outras imagens da pagina, mas geralmente na janela que abre para compartilhar tem como trocar a imagem.

      já vi em alguns sites códigos para especificar a imagem, mas se usar então será a mesma imagem para todos os posts

      Excluir