O primeiro passo é instalar normalmente o Gadget Postagens Populares no seu blog, entre na pagina Layout, clique para adicionar um gadget procure por Postagens Populares.
Configure como quiser, ou seja, escolha se vai mostrar as postagens mais visitadas do blog nos últimos 30 dias, última semana ou tudo. E escolha também a quantidade de postagens que será exibida, mas a configuração para mostrar miniatura da imagem ou snippet são desnecessárias, pois vamos alterar completamente o HTML deste gadget.
Agora vamos deixar o código HTML pronto para ser colocado no blogger, então copie e veja o que podemos personalizar no código abaixo:
<div class='widget-content popular-posts'>
<b:loop values='data:posts' var='post'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_top'> <img expr:src='data:post.thumbnail' height='72' style='float:left;padding:9px;' width='72'/></a>
</b:loop><a href='http://www.frasescurtas.com.br/p/mensagens-e-frases-diversas.html' title='Mais Frases, Mensagens e Imagens'><img height='72' src='http://4.bp.blogspot.com/-srJdtMIfDA8/UDaO-MYXxqI/AAAAAAAAFH8/6k7XXbpbItM/s1600/seta-imagens.gif' style='border:none;padding:9px;float:right' width='41'/></a>
Podemos modificar o espaço entre as miniaturas das imagens no trecho style='float:left;padding:9px;' apenas alterando o numero 9 para dar mais ou menos espaço entre as imagens.
Esse outro trecho de código é o que faz aquela setinha no final da galeria de imagens para o visitante ver mais imagens.
<a href='http://www.frasescurtas.com.br/p/mensagens-e-frases-diversas.html' title='Mais Frases, Mensagens e Imagens'><img height='72' src='endereço da imagem' style='border:none;padding:9px;float:right' width='41'/></a>
Mas ele não faz parte do código das postagens populares, ou seja, se quiser pode simplesmente apagar esse trecho e o resto do código funcionará perfeitamente mostrando as miniaturas das imagens mais visitadas.
Porém na verdade esse é um link para uma pagina de nosso blog onde publicamos uma lista de links e miniaturas das imagens em ordem aleatória, se quiser criar uma pagina deste tipo pode usar o javascript que mostramos no tutorial: Gadget ou Pagina com Postagens Aleatórias e Miniatura das Imagens. E veja também Criar Imagens para Usar em Blog.
Colocando o Código HTML no Blogger
Agora que temos o código pronto entre na pagina editar HTML e faça um backup do seu template para evitar erros no código do seu blog, marque a opção Expandir modelos de widgets e procure pelo código:
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
Sabemos que é um trecho longo de código, mas apague esse HTML e coloque aquele código que acabamos de preparar no lugar dele. Agora clique para visualizar e se ficou como você queria é só salvar. Lembramos que esse código mantem as miniaturas das imagens uma do lado da outra deste que haja espaço (largura) suficiente no gadget.
Veja outras dicas e tutoriais:
Fazer Menu Accordion no Blog - Criar Sub Categorias no Blogger
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas
Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)
Lembramos que você pode alterar a qualquer momento a configuração do gadget normalmente pela pagina layout mudando o numero de miniaturas ou o período (ultima semana, mês ou tudo) sem precisar mexer na pagina editar HTML. Mas se você retirar o gadget e depois decidir recolocar então será necessário fazer todo o trabalho deste tutorial novamente.
Era exatamente o que eu queria, mas aí percebi que ele não aceita imagens de outras hospedagens, como o Imageshack, que é o que eu uso. Então ficava sempre aquele ícone usado para quando não tem imagem :/
ResponderExcluirsim o gadget posts populares usa as imagens hospedadas no proprio blogger.
ResponderExcluirComo que Faço Pra Colocar uma em Baixo da outra ,sem os Sub Texto ?
ResponderExcluirEntao é por isso que nao ta aparecendo nenhuma umagem ¬¬
ResponderExcluirGel Jefferson apague o trecho float:left; nesta linha:
ResponderExcluirimg expr:src='data:post.thumbnail' height='72' style='float:left;padding:9px;' width='72'/
Olá Fabiano gostaria de saber se você sabe como instalar o gadgets com popular, tags e arquivo e quando clicar abre separadamente
ResponderExcluirRodrigo não entendi o que você está querendo fazer.
ResponderExcluiresses 3 gadgets que falou são separados. Quando falou tags está querendo dizer o gadget marcadores?
São separados mais já vi em alguns sites que ele abre quando damos um clique Ex:
ResponderExcluirPostagens Populares = marcadores = arquivo
fica desce jeito em linha horizontal.Se darmos um clique em Postagens Populares abre postagens Populares se darmos um clique em marcadores abre os marcadores e por último o arquivo.
Desde já agradeço e me despeço
Rodrigo veja se é isso que procura: Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)
ResponderExcluirFabiano obrigado pela atenção achei um blog que tem o que desejo fazer se possivel da uma olhada nele para ver se é possivel fazer.O gadget está assim:Popular-Tags-Arquivo do Blog
ResponderExcluirhttp://rodrigotechblog.blogspot.com.br/
isso que falou são códigos de abas, mas faz tempo que não faço testes com códigos deste tipo.
ResponderExcluirmas acho melhor usar separadamente
Ei Fabiano, tudo bem!
ResponderExcluirA maioria das minhas imagens foi hospedada no imageshack será que é por isso que não aparecem?
O que eu posso fazer para modificar isso?
Obrigada!
Beijos!
acho que o unico jeito é hospedar as imagens nas proprias postagens ou seja no blogger.
ResponderExcluirEu consigo aumentar o tamanho da imagem tumbnail, sem perder qualidade da imagem?
ResponderExcluirEu queria usar imagens maiores tipo 175x175 com a qualidade da imagem boa.
Tem como?
Alguém me ajuda?
Abraço
Giovana Miosso para o gadget de postagens populares acho que não tem como alterar o tamanho das imagens, mas se quiser aqui tem um Código para Mostrar Postagens Aleatórias com Imagens no Blogger
ResponderExcluirminhas postagens não se atualizam, fica sempre nas mesmas, já exclui e instalei denovo e nada, vc sabe como alterar isso, pois no blogger já mostra outras postagens populares? Meu blog:
ResponderExcluirhttp://fotosemomentoss.blogspot.com.br/
Se puder me ajudar, agradeço.
Leticia veja se a configuração do gadget está em semana, mês ou tudo.
ResponderExcluirtalvez você esteja comparando coisas diferentes e por isso acha que não atualiza
Obrigado, acho que entendi é porque os comentarios são em maior numero sempre, outras postagens não foram melhores. Valeu
ResponderExcluirCara Vlw isso erá Tudo que Eu Estava à Procura!
ResponderExcluirEu consegui deixar somente as imagens sem precisar mudar nada do código html, apenas usei o css. É bem mais simples. Primeiro eu configurei o gadget no para não exibir o resumo do post (snipett) depois eu adicionei a propriedade display:none ao elemento .item-title (q corresponde aos títulos dos posts) desta forma os títulos não aparecem sendo mostrado só as imagens. Depois adicionei display:inline-block no elemento #PopularPosts1 li para que as imagens ficassem lado a lado em forma de bloco, aí foi só ajustar as medidas margin e padding para alinhar direito, e no fim ficou exatamente como eu queria. Quem quiser conferir é só acessar meu blog, o gadget tá na sidebar com o título de destaques.
ResponderExcluirComo faz para deixar o título embaixo das imagens? Somente o título?
ResponderExcluirno código apague o trecho float:left;
Excluirque está no código da imagem