Participe da nossa comunidade de Mulheres Empreendedoras!

Cadastre-se para receber as novidades do blog direto no seu e-mail!

 

08 novembro 2016

COMO AUMENTAR A IMAGEM DA POSTAGEM POPULAR NO BLOGGER

AUMENTAR A IMAGEM DA POSTAGEM POPULAR

Você vai aprender nesse tutorial como aumentar a imagem da postagem popular e deixa-la com aparência profissional e moderna.

Um blogueiro que se preze cuida muito bem da aparência do seu blog, pois a organização e funcionamento dos elementos da lateral é tão importante quando o conteúdo. E o gadget postagem popular é um item indispensável do seu blog, sua função é basicamente divulgar os posts mais acessados pelos seus visitantes durante a semana, mês ou num todo. 

O modelo que apresento hoje é bem simples, e elegante. A largura da imagem foi aumentada, e um lindo efeito fede ao passar o mouse foi inserido. O titulo do post fica abaixo da imagem, e não ao lado como no modelo original. Veja na demostração:



AUMENTAR A IMAGEM DA POSTAGEM POPULAR


Passo 1 - Pra começar, siga as instruções da imagem abaixo.


AUMENTAR A IMAGEM DA POSTAGEM POPULAR

Passo 2 - Procure por Modelo Editar HTML, clique dentro do corpo do layout e aperte CTRL+F. Uma caixa de busca aparecerá, e dentro dela procure por:

? resizeImage 

Vai aparecer o seguinte trecho:

? resizeImage(data:post.featuredImage, 72, "1:1") 


AUMENTAR A IMAGEM DA POSTAGEM POPULAR

A função desse trecho é aumentar a imagem e deixa-la proporcional e com boa qualidade. O 72 aumenta a imagem, normalmente o tamanho de uma sidebar é 300 de largura. Já o 1.1 dá qualidade a imagem, deixe-o em 3:2

Observação: Essa parte do tutorial foi inspirado no post do But Lariz <3


Passo 3 - Agora aperte CTRL+F novamente e procure por ]]></b:skin> e acima desse trecho cole o seguinte código:
/** Início das Postagens Populares por www.manualdablogueira.com.br **/
#PopularPosts1 {
padding: 0px; 
list-style: none; 
margin-bottom: 10px; 
text-align: center; 
#PopularPosts1 a { 
font-family: 'Arial', sans-serif; 
font-size: 13px; 
color: #151515; 
text-transform: none; 
font-weight: bold; 
#PopularPosts1 a:hover { 
color: #FF5899; 
#PopularPosts1 img { 
padding: 8px 5px 5px 8px; 
#PopularPosts1 img:hover { 
-webkit-transition:All 0.7s ease-in-out; 
-moz-transition:All 0.7s ease-in-out; 
-o-transition:All 0.7s ease-in-out; 
filter:alpha(opacity=90); 
-moz-opacity:0.4; 
-khtml-opacity:0.4; 
opacity:0.4; 
/** Fim das Postagens Populares por www.manualdablogueira.com.br **/

Passo 4 - Visualize, se estiver tudo ok, salve! 

Mas Lory, não funcionou no meu blog... Talvez você tenha feito algo errado, refaça com atenção, mas lembre-se que templates que já sofreram muitas personalizações são vulneráveis a erros, portanto faça seus tutoriais em uma base nova. 

O ID da Postagem popular é PopularPosts1 verifique se e o seu também é, caso não seja, basta trocar os trechos do ID do último código pelo seu.

E se você gostou já sabe o que fazer: Compartilhe esse artigo com os amigos, siga o Manual em "Faça parte" que fica na lateral do blog e curta nossa página no facebook para nunca mais perder nossas novidades. Um enorme beijo e até a próxima.

8 comentários:

  1. Mil perdoes Lorena, nao sabia que estava a venda,baixae gratis no blog btemplates.com, já retirei do ar! Mas gostaria de comprar, se ainda estar disposnivel, por favor entre em cntato comigo! Obrigado e desculpe mais uma vez!

    ResponderExcluir
    Respostas
    1. Olá,

      Não entendo muito bem seu comentário. De que layout está falando?

      Excluir
  2. Realmente, ele dá um ar mais profissional ao blog. Fica muito lindo.
    Mas Lory, me tira uma dúvida. Como eu faço para baixar esse template base? Eu procurei e não encontrei! Obrigada, bjuss

    ResponderExcluir
    Respostas
    1. Fica lindo mesmo Carol, depois me conta como ficou no seu blog!

      Ao lado segue o link do download [http://migre.me/vsYR8]

      Grande beijo :*

      Excluir
  3. Oi Lory me ajuda! É para substituir esse link que tem seu endereço com o meu endereço ou deixo eu ele assim mesmo??

    ResponderExcluir
    Respostas
    1. Oi Millena,

      Não precisa mexer no local do endereço do blog. Vai funcionar direitinho!
      Bjs :*

      Excluir
  4. obrigada. estava tentando achar onde eu deveria mexer pra poder ajeitar o tamanho das imagens ^^

    ResponderExcluir
    Respostas
    1. Fico feliz em ajudar Alice!
      Um beijo enorme e um Feliz Natal!

      Excluir

Manual Da Blogueira. Todos os direitos reservados © Desenvolvido por Lory Design Studio
Usamos cookies próprios e de terceiros que entre outras coisas recolhem dados sobre seus hábitos de navegação para mostrar publicidades personalizadas e realizar análises de uso de nosso site.
Se continares navegando consideramos que aceita seu uso. Entendi Mais informações