Postagens Populares Personalizadas Blogger
Veja como Personalizar o Gadget Postagens mais Visitadas do Blogger. São algumas dicas simples de HTML do Blogger para você modificar como quiser a lista de Posts mais visitados do seu blog (Popular Posts) para alterar o tamanho da imagem do thumbnail (miniatura da imagem do post).
A principal vantagem de usar o Gadget Postagens Populares do Blogspot é ajudar a manter as pessoas mais tempo no seu site e com isto reduzir sua taxa de rejeição gerando mais visualizações de paginas.
A instalação deste Gadget é simples: na pagina Layout, clique em adicionar um gadget e procure por: Postagens mais Visitadas.
Coloque um Titulo no Gadget, escolha se quer mostrar os artigos mais visitados da ultima semana, 30 dias, ano passado ou todo o período. Depois defina o layout das Postagens mais Visitadas: mostrar ou não a miniatura da imagem, snippet (começo do texto da postagem) e quantas postagens quer mostrar no Gadget.
Você pode editar este Gadget diretamente no HTML do Blog. O código padrão do Blogger é um pouco longo, mas pode ser trocado por poucas linhas de HTML.
Basicamente você pode trocar o código desde que está entre <div class='widget-content popular-posts'> até a parte: </b:includable>.
Em destaque na imagem acima. Apenas por:
<div class='widget-content popular-posts'>
<b:loop values='data:posts' var='post'><a expr:href='data:post.href'><img expr:src='resizeImage(data:post.thumbnail, 100, "1:2")'/><data:post.title/></a><data:post.snippet/></b:loop>
</div>
</b:includable>
O código da imagem da miniatura (thumbnail) é:
<img expr:src='resizeImage(data:post.thumbnail, 72, "1:1")'/>
Nele o numero 72 é o tamanho da imagem do gadget PopularPosts que você pode definir o tamanho que desejar. Além disso, o numero 1:1 gera uma imagem quadrada, se você trocar por 1:2, ele mostrará a imagem retangular com base na largura, ou seja, a imagem terá 72 de largura e altura proporcional a imagem publicada. Veja o exemplo abaixo.
Portanto você pode modificar como desejar naturalmente levando em consideração o layout do seu blog e o acesso do seu blog por celular, smartphones... Afinal o site tem que aparecer em qualquer resolução de tela. Veja Dicas de Editor de Imagens Online Gratuito
Aqui temos outras partes do código HTML deste gadget:
<data:post.title/> - Titulo da Postagem
<data:post.snippet/> - Primeiras linhas, palavras da postagem
Podemos muda-los de lugar, por exemplo, colocar a imagem entre o titulo e o resumo do post:
<a expr:href='data:post.href'><data:post.title/><br/><img expr:src='resizeImage(data:post.thumbnail, 100, "1:2")'/></a><br/><data:post.snippet/>
Note colocamos os <br/> apenas para garantir a mudança de linha para evitar o texto fique ao lado da imagem.
Na pagina de editar HTML ainda podemos adicionar CSS para personalizar o Gadget Postagens mais Visitadas usando o estilo: #PopularPosts1, por exemplo:
#PopularPosts1 img {float:left; margin-right: 10px;} - imagem do lado do texto: float:left, neste caso retire o <br/> que adicionamos no código.
#PopularPosts1 {text-size:14px} - tamanho do texto.
Lembramos que modificando os códigos da maneira que mostramos a configuração da pagina layout funcionará apenas para definir a quantidade de postagens e o período (últimos 7 dias, ultimo mês...). Porém para mostrar ou não a snippet (primeiras palavras do texto) será necessário alterar o código pelo HTML do blogspot como mostramos.
A principal vantagem de usar o Gadget Postagens Populares do Blogspot é ajudar a manter as pessoas mais tempo no seu site e com isto reduzir sua taxa de rejeição gerando mais visualizações de paginas.
Configurar Postagens mais Visitadas
A instalação deste Gadget é simples: na pagina Layout, clique em adicionar um gadget e procure por: Postagens mais Visitadas.
Coloque um Titulo no Gadget, escolha se quer mostrar os artigos mais visitados da ultima semana, 30 dias, ano passado ou todo o período. Depois defina o layout das Postagens mais Visitadas: mostrar ou não a miniatura da imagem, snippet (começo do texto da postagem) e quantas postagens quer mostrar no Gadget.
Personalizar Postagens Populares do Blogger
Você pode editar este Gadget diretamente no HTML do Blog. O código padrão do Blogger é um pouco longo, mas pode ser trocado por poucas linhas de HTML.
Basicamente você pode trocar o código desde que está entre <div class='widget-content popular-posts'> até a parte: </b:includable>.
Em destaque na imagem acima. Apenas por:
<div class='widget-content popular-posts'>
<b:loop values='data:posts' var='post'><a expr:href='data:post.href'><img expr:src='resizeImage(data:post.thumbnail, 100, "1:2")'/><data:post.title/></a><data:post.snippet/></b:loop>
</div>
</b:includable>
Mudar tamanho thumbnail (miniatura da imagem)
O código da imagem da miniatura (thumbnail) é:
<img expr:src='resizeImage(data:post.thumbnail, 72, "1:1")'/>
Nele o numero 72 é o tamanho da imagem do gadget PopularPosts que você pode definir o tamanho que desejar. Além disso, o numero 1:1 gera uma imagem quadrada, se você trocar por 1:2, ele mostrará a imagem retangular com base na largura, ou seja, a imagem terá 72 de largura e altura proporcional a imagem publicada. Veja o exemplo abaixo.
Portanto você pode modificar como desejar naturalmente levando em consideração o layout do seu blog e o acesso do seu blog por celular, smartphones... Afinal o site tem que aparecer em qualquer resolução de tela. Veja Dicas de Editor de Imagens Online Gratuito
Códigos Postagens mais Visitadas do Blogger
Aqui temos outras partes do código HTML deste gadget:
<data:post.title/> - Titulo da Postagem
<data:post.snippet/> - Primeiras linhas, palavras da postagem
Podemos muda-los de lugar, por exemplo, colocar a imagem entre o titulo e o resumo do post:
<a expr:href='data:post.href'><data:post.title/><br/><img expr:src='resizeImage(data:post.thumbnail, 100, "1:2")'/></a><br/><data:post.snippet/>
Note colocamos os <br/> apenas para garantir a mudança de linha para evitar o texto fique ao lado da imagem.
Estilos CSS das Postagens Populares
Na pagina de editar HTML ainda podemos adicionar CSS para personalizar o Gadget Postagens mais Visitadas usando o estilo: #PopularPosts1, por exemplo:
#PopularPosts1 img {float:left; margin-right: 10px;} - imagem do lado do texto: float:left, neste caso retire o <br/> que adicionamos no código.
#PopularPosts1 {text-size:14px} - tamanho do texto.
Enfim são códigos CSS que pode ser usados para modificar a aparência como desejar e fazer testes até encontrar o melhor layout para o seu site.
Lembramos que modificando os códigos da maneira que mostramos a configuração da pagina layout funcionará apenas para definir a quantidade de postagens e o período (últimos 7 dias, ultimo mês...). Porém para mostrar ou não a snippet (primeiras palavras do texto) será necessário alterar o código pelo HTML do blogspot como mostramos.
Marcadores: Conteúdo, CSS, Gadgets, Personalizar, Template