Postagens mais lidas com efeito colorido

em 6 de fevereiro de 2013

Olá!
Hoje vou compartilhar com você um gadget que uso aqui no blog há algum tempo, e que é tão leve, tão bonito e tão útil para exibir nosso melhor e mais acessado conteúdo,  que tenho usado na maioria dos blogs que personalizo.

Estou falando do gadget Postagens populares com efeito colorido.
Este:

postagens mais lidas com fundo colorido

São 4 passos simples, mas é preciso ler com atenção, ok?

Para começar ouça o meu conselho: antes de mexer em seu template faça backup completo do modelo.


Antes de começar exclua o gadget Postagens populares de seu blog caso tenha. Se o mantiver ele dará conflito com este que vamos instalar.


Para começar abra a página de onde copiará os códigos:

Copiar os códigos

Agora entre em seu painel administrativo do blog, faça login e clique na aba Modelo. A seguir clique na opção Editar HTML.
Dentro da caixa de código tecle Ctrl+F e dentro da barra de busca que abrir digite isso:



Dê Enter para localizar.
E imediatamente abaixo do trecho encontrado cole o primeiro código:

Salve as alterações.
Agora localize este trecho:

]]></b:skin>

Acima dele cole o segundo código.
Você pode mudar algumas coisas para combinar com seu blog:
Todas as cores são definidas pelo código hexadecimal precedido do sinal #.
O tamanho das fontes é definido pelo número 12px.
Quanto mais aumentar maior será a fonte.
Vá mexendo até ficar como deseja.
Salve as alterações.


Agora cole o trecho abaixo dentro da barra de busca e tecle enter para localizar:



Imediatamente abaixo dele cole o terceiro código.
Salve as alterações.
Vamos agora adicionar o gadget:

Clique na aba Layout e a seguir clique em Adicionar um gadget.
Na janela que abrir clique em Postagens populares.
Configure assim:


Você pode escolher se deseja exibir as postagens mais lidas de todos os tempos do seu blog, se as mais lidas do mês ou como eu faço as mais lidas da semana. Não exiba mais de 5 postagens pois o gadget ficará desconfigurado. Ajuste o título de acordo com sua preferência.
Após configurar clique em Salvar.
Arraste para onde deseja que o gadget apareça e para finalizar clique em Salvar alterações.

Caso queira alterar as cores das barras clique em Modelo e a seguir em Personalizar. Assim:

personalizar o blog
Na página que abrir você verá que as variáveis que comandam as cores das barras foram adicionadas ao seu template. Veja:


Faça testes e depois que ficar ao seu gosto clique em Aplicar ao blog.

Mas atenção!
Veja esta imagem:



Só clique em Aplicar ao blog se tudo estiver como deseja. Depois de clicar não poderá reverter se tiver cometido algum erro como trocar de template por acidente. Portanto, atenção!

Viu como é fácil?
Basta seguir os passos com atenção e tudo dará certo.

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.

36 comentários , comente também!

  1. Oinn que o tico e teco não vão dar conta ...
    Me dá calafrios quando vejo o " Editar Html"

    Mais é bacana esse gadget, acho que tô com vontade tentar :)
    Obrigada pela paciência em ensinar passo a passo.

    Bjins

    ResponderExcluir
  2. Afff, legal!! Mas eu tenho uma preguiça de mudar essas paradinhas, rsrsrsrsrsrs

    ResponderExcluir
  3. Estava reparando na lateral do seu blog e realmente dá um charme ao blog esse gadget e se ainda é leve, já curti.

    Tudo bem que, a essa hora e com sono, eu não vou conseguir fazer, mas volto depois pra ler com calma , creio que vai dar um UP a lateral do Pitacos de Lua :)

    Eliane, quero aproveitar para convidar você e os leitores do seu blog para passarem no meu blog que tem promoção por lá. Promoção fácil de participar e no kit do sorteio têm coisas pra ler e pra comer (embora alguns,como eu, achem que barrinha de cereal não seja comida :)

    http://pitacosdelua.blogspot.com.br/2013/02/promocao-pitacos-de-boa-forma.html

    ResponderExcluir
  4. Oi Elaine, você colocou no meu Blog e adorei!
    Como mudar toda semana os mais lidos?
    O Blog não muda sózinho.
    Como fazer?
    Dá para explicar ou é muito complexo?
    Help me please rsrsr
    Beijos.

    ResponderExcluir
    Respostas
    1. Jo, conforme te expliquei por email o Blogger muda automáticamente mas para isso é preciso que haja tráfego suficiente para que haja alteração nas mais lidas.
      Dá pra notar as mudanças se estiver configurado para ser semanal. Se optar por Tudo aí a mudança será muito mais difícil.
      Certo?
      bjssss

      Excluir
  5. Oi Elaine,fiz como falou,mas não ficou assim, colocido, só os números, onde errei?
    Beijos

    http://cynhartesanato.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Cynha, como não sei se você seguiu tudo como está no tutorial não sei onde errou.
      Sugiro que releia tudo com calma, tente primeiro em um blog de testes e descubra se pulou alguma etapa.
      boa sorte.
      bjssss

      Excluir
  6. Oi Elaine
    Nossa, eu queria entender a metade do que vc entende kkkkkkk, já faz quase um ano que tenho o blog, queria mudar o layout, mas tenho medo de perder tudo. Ah, já estou te seguindo, apesar de que não vi ninguém com tantos seguidores na Blogosfera até hoje. Parabéns!
    Bjos. Fique com Deus!
    http://ashistoriasdeumabipolar.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Luciana, muito obrigada pelo elogio!
      Navegue pelo blog, tem uma categoria chamada Dicas para blogs que pode te ajudar a fazer muita coisa.beijossss

      Excluir
  7. Ai, ai , ai. Lá vem voce, com novidades incríveis. Eu não resisto,
    Lá vou eu. Rezando para dar certo, kkk
    Bjks., Neli

    ResponderExcluir
  8. OLá Elaine...

    Mais um item muito útil que você com a sua humildade nos ensina, eu já fiz e postei la no meu blog, claro tudo muito amador, nada perto do seu profissionalismo!
    Aproveito para convidar você e os seus seguidores a verem como ficou e pode comentar, http://tupperwareecia.blogspot.com.br/
    agradeço...
    Abraços.
    Fátima Feitosa

    ResponderExcluir
  9. Óh eu aqui Elaine, rs( agora perdi a timidez de comentar, rs)
    Nem preciso dizer q assino embaixo do seu conselho de fazer o backup, eu q o diga, hihihi. Ótimo tutorial como todos, mas por hora estou com uma certa alergia de olhar para HTML,kkk mas gostei mto desse gráfico com cor e numeração, futuramente vou querer :) bjs.

    ResponderExcluir
  10. Elaine, muito bom, só preciso achar a paciência tecnológica rsrsrsr...

    Bjãoooooooooo

    ResponderExcluir
  11. linda vc só esqueceu de avisar que pode estar assim ou no blog

    Bju

    ResponderExcluir
  12. oi Elaine
    acabei de ver a postagem, bem explicadinha, sobre todos os seus artigos que nos ensinam tão bem a criar e usar um BLOG..... vc é realmente maravilhosa, sabe tudo e compartilha com todos os seus conhecimentos..... MUIIIIIIIIIIIIIIIITO OBRIGADO.... não fiz o cometário lá porque não achei onda..... mas espero que vc veja aqui..... beijocas.... obs. agora só falta vc se animar e escrever um LIVRO SOBRE TUDO O QUE VC ENSINA AQUI..... eu serei a primeira a comprar.....

    ResponderExcluir
  13. Tem presentinho no meu Blog para você: Selo Literário.
    Beijos.

    ResponderExcluir
  14. Eu não consegui localizar esse trecho:
    ficou tudo bagunçado aqui no meu blog e não sei como voltar ao normal mais.
    Tô revoltada aqui, por não ter conseguido.

    ResponderExcluir
    Respostas
    1. Emilly, qual trecho não encontrou?
      Caso não tenha conseguido basta apagar tudo o que colocou e tudo volta ao que era antes.
      E se fez backup conforme eu recomendei é só reinserir o template que salvou.
      boa sorte, espero que dê certo.

      Excluir
  15. que fofo,Elaine, esse efeito é a coisa mais linda !
    Amei!
    Beijo

    ResponderExcluir
  16. elaine deu tudo certinho...
    só tem um probleminha, dentro do quadradinho de Ao Vivo no blog, ta aparecendo uma mensagem assim: logotipo do blogger quebrado opa, isto é um erro...
    será q algo deu errado?
    bjos

    ResponderExcluir
  17. Oi Elaine, eu fiz todos os passos certinho, aliás 4 vezes, e não funcionou... Gostaria muito de deixar meus posts mais lidos assim. Eu utilizo o blogger, há alguma configuração que possa estar atrapalhando, como por exemplo modelo escolhido? Também tentei colocar a pesquisa personalizada e não deu certo...
    Aguardo um retorno. Obrigada!

    receitas-de-bolo.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Paty, eu não sei dizer, teria que olhar seu blog.
      Como eu disse ao final do tutorial, caso realmente não cosniga sozinha escreve pra mim, a gente combina e eu faço pra ti.
      beijossss

      Excluir
    2. Oi Elaine, muito obrigada pela atenção e também pela visita. Que pena que não deu certo né? Vou tentar de novo depois. Adorei seu blog e vou continuar acessando. Obrigada pelas dicas legais que você tem colocado!
      bjs

      Excluir
  18. nao da pra copiar o link? como faço?

    ResponderExcluir
    Respostas
    1. Passe o mouse em cima, clique no primeiro ícone que aparecer (ele é mais ou menos assim: <> ), dê um Crtl+A e depois um Crtl+C. Obrigado, mais um tutorial bem sucedido!

      Excluir
  19. Olá Elaine , esse não consegui, não fica colorido, mudei as cores lá onde personaliza o modelo, mas não consigo, acho que faltou alguma coisa, não entendi muito bem onde você diz que colocou "em verde em laranja etc..pois não consigo visualizar essas cores que você menciona.

    ResponderExcluir
  20. Eliane, eu tentei umas 3 vezes e não consegui colocar, e sempre dá erro. Eu acho que você deveria atualizar esse post pois há algum tempo o Blogger mudou e não há mais a opção "Expandir modelos de widget", eu gostaria desse algumas dicas pra quem não está conseguindo. Gosto muito do seu blog! Obrigado desde já.
    http://legiaodelivros.blogspot.com.br/

    ResponderExcluir
  21. Segui o tutorial num blog de testes. Mas ele desconfigurou o template. =S

    É um template responsivo, será que tem algo a ver?

    momentumsaga.com

    ResponderExcluir
    Respostas
    1. Hum, não sei, mas acho que não porque basicamente o código trabalha com CSS e não tem nenhum script que possa conflitar.
      Que tipo de desconfiguração ele causou?

      Excluir
    2. Assim que o efeito foi salvo, o blog ocupou a tela inteira. Quando desfiz a alteração, a sidebar e a coluna de postagens voltaram para o lugar, com os espaços nas laterais.

      Usei um outro tutorial para fazer o mesmo efeito e não houve alterações. O que será que houve? Fiquei curiosa também. rs

      momentumsaga.com

      Excluir
  22. Infelizmente não deu certo.
    Mas pelo menos as imagens das Postagens Populares voltaram, pelo menos não coloquei um monte de código em vão :v

    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…