23 março 2016

Como aumentar as imagens das Postagens Populares

Tutorial: Como aumentar as imagens das postagens populares - BLOGGER

Oi gente ♥ Se tem um drama que nós, blogueiros do blogger, enfrentamos é esse gadget de postagens populares. O gadget não é lá muito bonito e a imagem é pequena, é uma coisa tão old né? haha. Eu não estava feliz com aquele gadget e saí a procura. Eis que eu achei um tutorial que deu super certo, mas em inglês.

Esse tutorial foi atualizado em 23/09/2016.

Como eu sei que muita gente gostaria de deixar as postagens populares mais bonitos, com a miniatura maior e personalizada, resolvi fazer esse tutorial ensinando a aumentar o tamanho das imagens e deixar o visual mais bonitinho. Antes era preciso um script pra isso, que parou de funcionar. Agora é MUITO MAIS FÁCIL mudar.

Passo 1. Faça um backup do seu layout. Isso é importante, você não quer perder seu lay. Você pode fazer de dois jeitos, criar um blog de testes, copiar todo o código do seu layout pra esse blog, os gadgets e manter tudo a salvo lá, ou pegar o código e salvar no bloco de notas. Qual código? Aquele que fica em Modelo > Editar HTML. Certifique-se de copiar tooodo ele, do começo ao fim. 

Passo 2. Vá ao painel do blogger, clique em layout e adicione um gadget onde você quiser (sidebar). Selecione o "Postagens Populares". Nas opções, eu costumo deixar apenas 3 posts, e os mais visto dos últimos 30 dias, mas fica ao seu critério. 

Tutorial: Como aumentar as imagens das postagens populares


Passo 3. Vá em "Modelo". Clique em "Editar Html". Clique na caixa com o códigos, aperte ctrl+f e procure a seguinte tag: 

post.featuredImage, 72,

Vai aparecer algo assim:

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

O 72 é o tamanho do quadrado, eu costumo deixar 250 que é o tamanho da minha sidebar, então você coloca o tamanho da sua sidebar.

O 1:1 é a proporção, é só trocar para 3:2

Cuidado com as vírgulas na hora de alterar.



Passo 4. Aperte ctrl+f e procure por ]]></b:skin> , antes disso, cole:

.popular-posts ul {
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.popular-posts a {
    font-size: 10pt;
    text-transform: uppercase;
}

.PopularPosts .widget-content ul li {
    padding: 0px;
    list-style: none;
    margin-bottom: 10px;
}

.PopularPosts .widget-content ul li:hover {
    opacity: 0.7;
}

Isso vai deixar seu gadget alinhado e lindo. Agora é só salvar e ser feliz! 

Gostou do tutorial? Tem muito mais na página EXTRAS do blogger. Não quer perder nenhuma dica ou tutorial sensacional, nem material exclusivo muito legal que está por vir? Cadastre-se no butlariz, e seja avisado por e-mail! 

Comente com o Facebook:

12 comentários:

  1. Comentei lá no grupo e vou comentar aqui também, porque sim.

    Menina como você adivinhou que eu estava procurando esse tutorial??? Super amei e com certeza vou incluir no meu lay novo. Eu já havia testado alguns tutoriais mais neste estilo eu não tinha achado, muito obrigada por compartilhar e fazer uma pessoa feliz!

    Beijos da Thay

    ResponderExcluir
    Respostas
    1. Haha <3 Eu passei muito tempo procurando, e finalmente consegui encontrar, esse é um gadget tão importante né? Fico feliz que tenha gostado! Beijos ♥

      Excluir
  2. Adoro teus passo a passos! Já mudei mais uma coisinha lá no meu blog! rs Obrigada por compartilhar! Bjs

    ResponderExcluir
    Respostas
    1. E olha que tem muuuito mais por vir <3 E vou te contar um segredo: Semana que vem vai ter freebie o/ Eu que agradeço pelo carinho!

      Excluir
  3. Nunca pensei em usar, mas olhando o tutoriaaaal... lá vou eu colocar no meu Template kkkkkk
    Obrigada, Lariiiiiii, sua coisa linda <3


    www.oablogueira.com

    ResponderExcluir
    Respostas
    1. kkkkkk, esse é tão amorzinho né? Da muita vontade de usar mesmo, não é atoa que corri pra colocar o meu haha, e claro, fazer tutorial pra vocês <33 Imagina, eu que agradeço por sempre estar aqui <3

      Excluir
  4. Já vou usar no meu blog! Eu sempre quero mudar alguma coisa e não manjo muito disso e também nunca entendo muito os tutos das coisas que eu quero mudar... AMEEEEI! Tu arrasa <3

    Sempre me salvando, HAHAHA. Obrigadaaaaa♥

    ResponderExcluir
    Respostas
    1. kkkkkkkk fico feliz que goste Jaque! E muito mesmo por ter ajudado <333 Quando quiser aprender algo me avisa, pra eu fazer mais tutoriais, haha <3 Beijos!

      Excluir
  5. haha, todos os dias estou aqui no blog vendo os tutoriais.. Sempre me ajudando..
    Beijoss
    www.belalindaa.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi Bela, que linda! Fico muito feliz em saber e em ajudar <3 Se quiser algum tutorial, é só pedir! Beijos <3

      Excluir
  6. Lari, era desse tutorial que eu estava precisando!!! Valeu mesmo! <3


    Ah, te indiquei para responder a ''TAG: The Lebster Award'' lá no blog. Depois dá uma passadinha por lá!

    Beijos!

    porfavorjulia.com

    ResponderExcluir
    Respostas
    1. Que linda!! Fico feliz em ter ajudado <3 Vou ver a tag sim e responder em breve <3 Beijão! <3

      Excluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design