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.

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.
Dá pra fazer isso em todos os post's?
ResponderExcluirives x)
ResponderExcluirsim, 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
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/
ResponderExcluirRandromedo
ResponderExcluirveja 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
Fabiano você é o cara... Vou testar aqui!
ResponderExcluirValew!!!
Felipe Argôlo.
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.
ResponderExcluirvia Felipe Argôlo
Muito bom ótima dica você é fera.
ResponderExcluirE aê galera muito bom esse post.
ResponderExcluirTem novidade no Designer do modelo do Blogger.
segui o link http://googleblog.blogspot.com/2011/09/dynamic-views-seven-new-ways-to-share.html
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
ResponderExcluirAriel
ResponderExcluirseu 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
valdemir achei legal as formas de visualizar o blog... vou escrever sobre isso logo...
ResponderExcluirwww.obomdoacupe.com
legal, muita gente estava querendo mais paginas extras
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!
ResponderExcluirMuito grato, Igor
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?
ResponderExcluirIguinho__- HQ
ResponderExcluirsobre 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
o robots do meu outro site, uma parte ta assim:
ResponderExcluirUser-agent: *
Disallow: /search
Allow: /
e o google atualizou meu site no dia 20 de setembro, hoje ja é dia 28 ...
Caro amigo, quero parabenizá-lo pela ótima ferramenta que vc disponibiliza para pesquisa e aprendizado. Obrigado
ResponderExcluirAriel
ResponderExcluiro 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
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.
ResponderExcluirolá 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
ResponderExcluirvocê conheçe por exemplo algum codigo executor poderoso hehe que faça ele pegar certinho
talvez o blogger tenha algum tipo de bloqueio para camera... ou algo assim...
ResponderExcluirtente 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
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
ResponderExcluirFabiano 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
ResponderExcluirPesoal 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.
ResponderExcluirme ajudem ai por favor e parabéns pelo blog de dicas, o que seria os blogueiros sem esse site. valeu mesmo.
não tem como colocar uma imagem ou pagina de abertura no blogger
ResponderExcluirOla 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
ResponderExcluirmoreijo
ResponderExcluirpode 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
em cada post que eu fizer tenho que adicionar uma pagina nova e colocar esse codigo?
ResponderExcluirAnynha
ResponderExcluiresse 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
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.
ResponderExcluirAs miniaturas estão muito pequenas.
Pode me ajudar a resolver os problemas do tamanho das miniaturas?
ResponderExcluirGabriel
ResponderExcluirneste trecho do código você altera o tamanho da miniatura
width="80" height="80"/
está quase no final
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
ResponderExcluiraqui tem um codigo Criar um Índice do blog - Mostrar links de todos os posts
ResponderExcluirmas isso deixa o blog lento é melhor usar em uma pagina extra do blogger
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.
ResponderExcluirQuero 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.
Bom dia!
ResponderExcluirestou 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!
@@nlembronfiz não sei como resolver o problema
ResponderExcluirem alguns blogs o botão do facebook gera alguns erros na hora de pegar o resumo ou imagens
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@*Caroline Mor* não entendi sua pergunta
ResponderExcluirvocê quer criar paginas extras? mas qual a finalidade?
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@Lua tem um gadget de postagens mais visitadas
ResponderExcluirentre na pagina layout > adicionar gadget e procure por postagens populares
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@Lua as postagens populares não tem jeito mas pode fazer com as postagens mais comentadas, veja o código aqui: Postagens mais comentadas
ResponderExcluiré só usar esse código em uma pagina extra do blog
Puxa, que pena! Mas agradeço assim mesmo, Fabiano. E vou dar uma olhadinha nessa sua sugestão. Valeu mesmo!
ResponderExcluirAhh, muito bacana este espaço e a atenciosidade do dono dele também. =)
Fabiano, grato por esse tutorial!
ResponderExcluirGostaria 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!
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.
ResponderExcluirFelipe Argôlo.
Fabiano, obrigado pela atenção.
ResponderExcluirEu 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.
Fabiano Roberto eu tetei colocar esse código depois do código:
ResponderExcluirPra 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
tente colocar o codigo no bloco de notas antes de colocar no seu blog.
ResponderExcluiralguns códigos geram erros copiados de uma pagina diretamente para outra
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.
ResponderExcluirFabiano ROberto fiz o q vc mandou e nada,só apareceu isso ");
ResponderExcluirPor que será??.....
veja neste trecho
ResponderExcluiront-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
Isso mesmo cara deu certo como sempre obrigado
ResponderExcluirfabiano: como mudar o estilo da fonte do título? mudar para Oswald...
ResponderExcluirnesta linha você pode alterar o estilo da fonte
ResponderExcluir.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
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
ResponderExcluiroutra coisa que acontece é que quando coloco o código em varias partes do template o que eu mudo em um modifica todos
ResponderExcluirquando usa estilos CSS (.arquivos a{color....)
ResponderExcluirele 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.
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?
ResponderExcluirhttps://lh4.googleusercontent.com/-Gg9Q1yrn6vI/UMsxNT2fxTI/AAAAAAAADrI/hKfwRoQI0js/h120/Nova+Imagem.JPG
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.
ResponderExcluirdeve ter feito alguma alteração errada nos código.
ResponderExcluirinfelizmente qualquer detalhe gera erro, por exemplo uma letra ou sinal faltando ou sobrando
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!
ResponderExcluiro 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
ResponderExcluirObrigado. Mas eu queria saber se dar pra fazer gadget gerado por esse código ser a minha página de abertura (página inicial) ?
ResponderExcluiracho 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
ResponderExcluirCara tem como exibir na horizontal e com um resumo do post?
ResponderExcluirEstou precisando muito...
BrunoWeb
ResponderExcluirveja 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....
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?
ResponderExcluirem 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.
Excluirjá vi em alguns sites códigos para especificar a imagem, mas se usar então será a mesma imagem para todos os posts