Postagens mais lidas, numeradas e com efeito colorido

em 28 de julho de 2014

Tempos atrás eu publiquei aqui no blog um tutorial que ensina como colocar as postagens populares com efeito colorido, relembre:
Postagens mais lidas com efeito colorido

Mas o recurso, embora funcione e seja bem legal, requeria 3 passos, e isso muitas vezes complicava um pouco.
Então vamos simplificar tudo em apenas 1 passo, que tal?
E de quebra ainda colocar um efeito giratório nas imagens.
Veja como ficará:
Para visualizar o efeito clique:

Visualizar


Para começar você precisa ter instalado em seu blog o gadget Popular Posts.
Faça assim:
Acesse a aba Layout de seu blog e clique em Adicionar um gadget.
Na caixa de opções que expandir selecione Postagens Populares e configure o gadget assim:

Troque o título se desejar, salve, arraste para onde deseja e salve as alterações em Layout.

Como personalizar o gadget Postagens Populares?

Agora vamos dar charme ao gadget.
Acesse a aba Modelo de seu blog e clique em Personalizar.
Na coluna lateral esquerda selecione a opção Avançado.
Role as opções até achar Adicionar CSS. Clique nele.
Dentro da caixa que abrir cole este código:

Copiar o código


Dê um espaço ao final do código (sim, use a tecla espaço para dar um espaço ao final do código).
Assim que o botão Aplicar ao blog ficar laranja clique sobre ele.

Está feito.

Dicas extras:
» Para trocar a cor de cada uma das células localize no código o termo background: #.
Por exemplo, este, que define a cor da primeira célula:
#PopularPosts1 ul li:first-child{
background:#ff4c54;
width:91%}

» Veja que o código numérico hexadecimal que marquei em pink define a cor de fundo da primeira célula.
Mude esse código para a cor que desejar.
Faça isso em todas as ocorrências de background: # e as cores mudarão.
Aqui tem uma tabela de cores para você escolher:
 http://cores.gratuita.com.br/

» Não recomendo que mexa em mais nada no código, a menos que você tenha mais conhecimentos em HTML e CSS.

Gostou?
Não deixe de comentar, curtir, compartilhar!
Um clique apenas e você ajuda o blog a crescer e melhorar!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

19 comentários , comente também!

  1. Achei muito lega, mas mexer , nem pensar...não entendo nadinha! abraços!

    ResponderExcluir
  2. Elaine, parabéns você é uma ótima profissional!
    Estou aqui babando com tantas novidades!rsrs

    Sucessoooooooooooo!

    Beijão,

    Alê


    Alessandra Soares
    alessandra-soares.blogspot.com.br

    ResponderExcluir
  3. Ai que coisa mais fofa! Adorei!!!
    Quem me conhece sabe que eu adoro esse tipo de detalhe...coisinhas que giram, janelinhas que abrem e fecham (lembra de você personalizando meu blog e eu te dizendo que queria as tais "janelinhas" como as do seu blog? kkkk)...
    Obrigada por ensinar!
    Beijinhos,
    Cris

    ResponderExcluir
  4. Oi Elaine, muito bom o tutorial, tão bem explicado que até ficou fácil de fazer, parabéns!
    Só fiquei um pouco em dúvida quando fui adicionar o código. É que quando clicamos em "Personalizar", e depois em "Avançado", ainda não abre a caixinha para inserir o código, é preciso também clicar em "Adicionar CSS".
    Há, e uma dica para o pessoal; dá para alterar a quantidade de postagens que se quer exibir, alterando direto no gadget Popular Posts, de 10 postagens como está na imagem acima, para a quantidade que desejar. (No meu pelo menos funcionou muito bem até agora).
    Muito obrigado por compartilhar mais este tutorial!

    Abraços!

    ResponderExcluir
    Respostas
    1. Guilherme, muito obrigada pela dica, eu realmente havia esquecido de mencionar que precisa colar o código na opção Adicionar CSS.
      Já corrigi, obrigada.

      Excluir
  5. mt bom, obg pela ajuda !!

    http://moderna-a-modaantiga.blogspot.com.br/

    ResponderExcluir
  6. Deu super certo, e ficou lindooooo
    valeu Elaine!
    Sucesso

    ResponderExcluir
  7. Obrigado pelas dicas Eliane, estou precisando dar uma renovada em meu blog e você tem me ajudado com suas dicas!
    Bjkas!

    ResponderExcluir
  8. Olá amiga Elaine...Acredito que não exista ninguém mais medrosa do que eu quando o assunto é mexer no hyml/css do blog. Tomei coragem, criei um blog de teste para colocar postagens coloridas com efeito que eu tanto amei. Acredite fiz tudo como você orientou....não deu certo. digo: não apareceu a janela que você refere quando seleciono a opção avançado para colocar o código. pois é.... fiquei frustrada por não consegui. Abraços

    ResponderExcluir
  9. Oi, Elaine querida.

    Gostei, apliquei e deu tudo certo.

    Parabéns e obrigada. Beijocas.

    ResponderExcluir
  10. gostaria muito de ter essa postagem populares com esses efeitos mais para mim não deu certo....alguém pode me ajudar.....

    ResponderExcluir
  11. Parabéns, seu blog é demais!!!!! Adorei as dicas, usei algumas em meu blog!
    Beijão

    ResponderExcluir
  12. Oi Elaine bem legal a dica fica super !!!
    Beijnhos
    Deus abençõe

    ResponderExcluir
  13. Oi Elaine, consegui fazer!!! Ebaa!!! rs
    Mt obrigada! Excelente tutorial! Como sempre!!! :)
    Bjs
    www.viveraprendendo.com

    ResponderExcluir
  14. Querida muito obrigada, fiz e deu certinho. Deus o abençoe.
    www.casacomamorearte.blogspot.com

    ResponderExcluir
  15. adorei deu certo
    http://mahbeira.blogspot.com

    mas no lugar de selecionar apenas as matérias da ultima semana eu coloquei do ultimo mês que tbm deu certo.
    Só na opção "tudo" todas as matérias do blog que nao dá...

    beijooos

    ResponderExcluir
  16. Consegui fazer ficou legal, obrigada! Seu blog foi pro blogroll, vc é um amor! Bjs!

    ResponderExcluir
  17. Admiro muito trabalhos bem feitos! E o seu trabalho é encantador. Gosta do que fazes e não tens medo de ajudar as pessoas!
    Parabéns.
    Eu apliquei no blog. Aliás, aprendi a mexer no blog todo com suas explicações. Obrigada mesmo!
    Post compartilhado!

    Beijos.

    Blog Jovens Mães

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…