Novo modelo para utilizar nas postagens populares


Já recebi vários comentário e e-mails perguntando como utilizar aquelas imagens destacadas para as postagens igualzinha ao Blog da Bruna Vieira. Existem duas formas de fazer: do jeito antigo, editando manualmente toda vez que você quiser uma postagem diferente (o que vamos combinar enche o saco) e o segundo jeito é utilizando JavaScript e CSS. E este modelo que vou ensinar para vocês hoje.

Procurei alguns tutoriais, mas todos deixavam a imagem muito pequena e se você tentasse aumentá-las no código elas ficam todas distorcidas e fora de foco. Ou então, só encontrava tutorias que deixavam a imagem grande, porém só buscava as imagens dos últimos posts, o que não era o que eu queria. Então consegui adaptar o código e tive o resultado que eu queria (vocês podem conferir aqui). Também vou deixar o link de cada tutorial que eu usei no final da postagem.

Vamos lá! Lembrando que todos os tutoriais disponibilizados aqui utilizam o Template Minima.


Primeiro passo: Adicionar o Gadget

Para que você possa personalizar todo o gadget, primeiro é necessário que ele já esteja incluído no seu blog. Então, vá até a guia Layout e adicione o gadget Postagens Populares.

Segundo passo: Personalizar o código

Vá até a guia Modelo e clique em Editar HTML. Procure por PopularPosts1, para isso utilize o CTRL+F. Você deve encontrar a linha:


IMPORTANTE: Se você tiver algum post que não tenha imagem, você pode definir uma imagem padrão. Prepare uma imagem e faça o upload dela em algum site de sua preferência. Feito isso, no código acima localize o link a seguir e altere pelo link da sua imagem:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FAev-LxsAHJRZge-z3msVshCwp7gFlRmrqkHyKOCqSoRMih4I5Xl4fU4WyaulpQwWfKYoJ-pkvGg3R-3qRXUw8cs16BO_e3F0B5XLi6DGLNhYqgwRs7g8u2S4pumgQOwseQerJ9D4kuQ/s1600/grande.png

Terceiro passo: Adicionar o JavaScript

Agora localize no seu template a tag </head> e adicione logo abaixo as linhas abaixo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js' type='text/javascript'/>

Quarto passo: Adicionar o CSS

Procure pela linha: ]]></b:skin> e cole o código logo acima desta linha.
 

Prontinho! Agora é só visualizar o layout. Qualquer dúvida, por favor, deixem nos comentários ou mande um email pela página de contato.




5 comentários:

  1. Maravilha! Tô amando os tutoriais daqui pq estão me ajudando ^^
    Você podia fazer um tutorial de como compartilhar TWITTER FACEBOK e GOOGLE+? (:
    Ia me ajudar muito no meu lay que tô fazendo!
    Bjs

    ResponderExcluir
  2. Adorei e já fiz la no meu blog ehuaheuahuea
    Um beijão e até mais.

    www.queridaga.com

    ResponderExcluir
  3. Não acho PopularPosts1 no meu código ! como faz agora ?

    ResponderExcluir
    Respostas
    1. Você precisa adicionar o o gadget Postagens Populares primeiro.

      Excluir