Personalizar Gadget Postagens Populares do Blog - Barras Coloridas

Mostrar os melhores posts do seu blog você pode usar o gadget de postagens populares como já falamos em outro tutorial sobre mostrar posts mais visitados, mas é possível fazer barras coloridas com o gadget de postagens populares e assim chamar mais atenção dos seus visitantes para esses posts que receberam mais visitas. Veja também outro tutorial sobre Modificar Cores e Fazer Formatação no Gadget Postagens Populares, ele é mais facil de utilizar e permite modificar completamente a aparência do gadget.

fazer barras coloridas com o gadget posts populares do blog

Para personalizar e colorir o gadget de postagens populares do seu blog o primeiro passo é adicionar esse gadget e escolher a opção para mostrar as 7 postagens mais visitadas, além disso, deixar marcadas as opções: miniatura de imagem e snippet. Falamos em 7 porque o código é feito para esse numero de barras coloridas.

Depois que adicionar o gadget entre na pagina modelo e faça um backup do seu template, assim não correrá o risco de estragar o seu layout caso tenha algum erro no HTML. Clique para editar HTML, marque a opção expandir modelos de widgets e procure por:
/* Variable definitions
   ====================

Logo abaixo dessa linha cole esse código:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

Agora procure por ]]></b:skin> e cole antes dele esse outro código:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Depois vamos substituir o código do gadget posts populares do blogger, ache o trecho:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
...
...
até a linha:</b:widget>

É um trecho longo de HTML por isso não o colocamos completo aqui, mas são aproximadamente 58 linhas de código que você deve apagar e colocar esse outro no lugar:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Clique para visualizar o blog, depois salvar as alterações no seu HTML e está tudo pronto. Para modificar as cores das barras das postagens populares você deve entrar na pagina modelo e clicar no botão personalizar, entre nas configurações avançadas e poderá alterar as cores usando o painel design do modelo dos novos templates.

alterar cores no design do modelo do blogger

Veja também:
Nuvem de Tags Coloridas - Modificar Cores dos Marcadores
Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos
Paginas Dinâmicas do Blogger com Menu de Gadgets Flutuantes

Quando terminar de instalar e testar o código poderia configurar o gadget de postagens mais visitadas como quiser para mostrar os posts com mais visitas na ultima semana, últimos 30 dias ou tudo. Esperamos que gostem dessa sugestão para modificar o layout deste gadget e deixem suas sugestões ou duvidas sobre esse e outros assuntos em nossos comentários.

71 comentários:

  1. Fabiano, vc sabe de algum blog que usa esse gadget para dar como exemplo?

    ResponderExcluir
  2. estamos usando esse gadget em nosso blog de testes (17/05/2012), alias foi com ele que fizemos a imagem que está no inicio do tutorial, veja aqui: Dicas para Blogs em Video

    ResponderExcluir
  3. EU TAVA FAZENDO ISSO E DEU ERRO, E OLHA QUE EU VISUALIZEI O BLOG E TAVA TUDO LEGAL :(

    ResponderExcluir
  4. fabiano eu tenho uma duvida eu sei que está meio fora do foco desse tutorial como posso colocar uma cor de fundo ao passar cursor encima do gad get de postagens populares padrão do blogger

    ResponderExcluir
  5. Johni dos Santos
    é possivel sim, alias só não falei neste assunto para não misturar coisas demais no mesmo tutorial.

    mas vou terminar de preparar e publicar sobre isso nos próximos dias.

    ResponderExcluir
  6. Não estou encontrando o trecho /* Variable definitions e acredito que em meu template não deve haver, como faço?

    ResponderExcluir
  7. ATENÇÃO! PRA DAR CERTO, CONFIGURE GADGET ''POST POPULARES'' EM 7 INTENS, PRA DEPOIS CONFIGURAR O SEU HTML, SE NÃO VAI ERROS NA HORA DE SALVAR. DEIXO AQUI UMA DICA.

    ResponderExcluir
  8. elvis jean

    se não achou o trecho Variable definitions, então procure por
    <Variable name="keycolor" description="

    e coloque o código ante dele

    ResponderExcluir
  9. Adorei, só achei código demais pra mim ausasuahuashua, mas vou tentar fazer *-*
    www.viverserfeliz-renata.blogspot.com.br

    ResponderExcluir
  10. Procuro por /* Variable definitions e não aparece nada. Nem /* Variable definitions
    ==================== :/.
    Podes ajudar-me Fabiano sff ? Ando á um tempão a procura deste tutorial e sabia que era daqui que o ia conseguir arranjar mas agora não o consigo utilizar :c.

    ResponderExcluir
  11. Wilker

    se não achou o variable.... procure pelo trecho

    <Variable name="keycolor" description="Main Color"

    e coloque o código antes dele

    ResponderExcluir
  12. cara vc é incrivel parabens quiria saber mecher com codigos assim como vc.

    ResponderExcluir
  13. Não to conseguindo, quando adiciono e o primeiro código abaixo do /* Variable definitions
    ====================
    Aparece o seguinte:
    Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: sidebartextcolor
    Error 500

    ResponderExcluir
  14. veja se não faltou algum detalhe no código ou se não apagou nada por engano.

    mas se quiser não precisa colocar esse trecho e pode alterar as cores de fundo diremente no CSS trocando os trechos deste tipo

    $(PopularPosts.background.color2)

    pelo código das cores por exemplo: #ccc;

    ResponderExcluir
  15. Fabiano Roberto tem como excluir esses ´´baloes de contador de visitas`` q fica do lado do gadget

    ResponderExcluir
  16. Estes comm a numeração do lado(1,2,3,4...)

    ResponderExcluir
  17. Obrigado Fabiano pela dica do CSS, nele também pude diminuir a quantidade de postagens para 5.
    Vlw pela dica!

    ResponderExcluir
  18. pode diminuir a quantidade de postagens diretamente no gadget de postagens populares se não quiser nem precisa modificar o código.

    ResponderExcluir
  19. Fabiano Roberto são estes balões aí que estão com o numero branco e o plano de fundo preto...

    ResponderExcluir
  20. è só excluir
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    e assim por diante
    #PopularPosts1 ul li:first-child + li + li:after{content:"2"}

    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}

    #PopularPosts1 ul li:first-child + li + li:after{content:"1"}

    ETC. ETC.

    ResponderExcluir
  21. Amei essa dica, e gostei muito. Funcionou bem bacana no meu blog que estou iniciando... www.renovacaokids.com. obrigada!

    ResponderExcluir
  22. Muito boa dica! Não conhecia nada similar!! Parabéns!! Sucesso! Abss

    ResponderExcluir
  23. tem como mudar a cor das letras??e letras em negrito tem como fazer também??

    ResponderExcluir
  24. Fabiano Roberto meu gadget,dos 5 links q eu coloquei só 3 aparece as imagens das postagens correspondentes ao link,os outros 2 aparecem uma imagem com estes nomes dentro NO IMAGE tem como acertar isso???Vê no meu link,entra lá e vê como tá

    ResponderExcluir
  25. Anonimo
    as duas ultimas linhas fazem a formatação dos links

    #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

    ResponderExcluir
  26. Junior acho que a questão é como publicou aquelas imagens no seu blog.

    tente salvar a imagem no seu computador depois editar a postagem e enviar a imagem diretamente ao blogger assim aparecerá a miniatura.

    ResponderExcluir
  27. Fabiano Roberto tem como separar as postagens populares com ma linha ????
    Entre uma postagem e outra.

    ResponderExcluir
  28. anonimo veja neste outro tutorial: Modificar Cores e Fazer Formatação no Gadget Postagens Populares

    lá fala em formatar, mas pode usar para criar uma linha

    veja no item

    #PopularPosts1 .item-content{ border: solid 1px #000;color: #333;font-size: 12pt;margin-bottom:5px;padding: 2px;}

    se trocar border: solid 1px #000;

    por border-bottom: solid 1px #000;

    ele ficará com uma linha abaixo de cada link

    ResponderExcluir
  29. Fabiano Roberto e linha pontilhada qual é o código???
    Passe aí por favor...

    ResponderExcluir
  30. linha pontilhada o código é border: dashed 1px #000;

    ResponderExcluir
  31. Fabiano Roberto não aparece cara as linhas!
    porque?????

    ResponderExcluir
  32. deve ter ficado algum código errado ou faltando, veja aqui sobre bordas: Colocar ou alterar as bordas

    ResponderExcluir
  33. Fabiano,tem como colocar 10 postagens?
    Se tiver como faz?

    ResponderExcluir
  34. Fabiano,esse é pelos marcadores,não queria mexer nos marcadores.
    Gostaria de saber se por esse código das postagens populares tem como aumentar para 10 ou só dá para ficar 7 mesmo?

    ResponderExcluir
  35. Laura
    eu não testei, mas acredito que sim, porém precisa ajustar o codigo e fazer testes

    veja o trecho

    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

    e depois #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after

    note que existe um padrão que cada item aumenta um li nas configurações, então é possivel fazer para os 10 itens dos posts populares, mas precisa ter paciência para ajustar o código

    ResponderExcluir
  36. Fabiano,eu configurei para aparecer 10 postagens,e fiz o que vc falou,pois também notei o padrão,fui acrescentando um li em cada item e no Group description eu acrescentei até o 10,mesmo assim não aparece,fica só 7.Tentei com 8 e 9 também,mas não deu certo.Até aumentei a porcentagem do width:90% e passei pra 95%,pois pensei que não estivesse aparecendo,por estar pequeno,mesmo assim,vai até o 7.Será que não precisa mexer em alguma coisa do código ?
    Esse foi o único que não mexi,por não saber o que fazer ai.

    ResponderExcluir
  37. eu também não mexi no código, acho que é muito trabalho para pouco resultado

    ResponderExcluir
  38. é porque o código tem muitos detalhes

    ResponderExcluir
  39. Fabiano,obrigada pela ajuda.Se eu conseguir venho aqui dizer.

    ResponderExcluir
  40. sempre fica os mesmos posts !!tem como mudar isso???

    ResponderExcluir
  41. Anônimo são as postagens mais visitadas do blog ou seja não podemos alterar a ordem que elas aparecem.

    mas você pode configurar para mostrar as mais visitadas da ultima semana, isso faz alterar um pouco a lista, mas mesmo assim não temos controle sobre ela.

    ResponderExcluir
  42. Fabiano olha o meu fala isso Declaração de variável inválida na skin da página: Este nome de variável da skin não é válido. Entrada: null
    o que eu faço?

    ResponderExcluir
  43. deve ter faltado alguma coisa no código na hora de copiar e colar no html do seu blog

    ResponderExcluir
  44. Fabiano,levei este código deu certinho,vou levar outras coisas.
    Obrigada.
    Lindo fim de semana para você.

    ResponderExcluir
  45. Fabiano,vim pegar de novo.
    Vou levar mais coisas.
    Lindo fim de semana para vc,bjs

    ResponderExcluir
  46. Amigos, o meu deu certo quando eu retirei o Group description="PopularPosts Backgrounds" selector="#PopularPosts2" , deixei as <Variable soltas. Grande código, parabéns!

    ResponderExcluir
  47. Como que faz para colocar o numero de visualizações do lado das postagem popular ?

    ResponderExcluir
  48. acho que não tem como colocar o numero de visitas de cada postagem

    ResponderExcluir
  49. qual linha? as das variaveis? se for pode procurar por

    <Variable

    e colocar junto com o restante das variaveis que achar

    ResponderExcluir
  50. Tentei de tudo! Não deu certo! Eu sei mecher um pouco com Html, resolvi alguns problemas mas não deu certo!

    ResponderExcluir
  51. Jonathan Meneses muito obrigado pela dica.

    e imagino que saiba porque não publiquei seu comentário.

    ResponderExcluir
  52. Olá. O meu blogue não tem o código /* Variable definitions
    . Como eu faço ?

    ResponderExcluir
  53. Wilker Augusto
    procure por Group description e provavelmente achará um lista com esses códigos então adicione o código que mostramos

    ResponderExcluir
  54. Fabiano,

    Eu adicionei como você passou no texto, porem as imagens ficaram um pouco maior, mesmo que ficou meio diferente, para mim é besteira, só quero mesmo diminuir essas imagens para ficar correto em relação ao gadget.

    Abraços

    http://dnafelicidade.blogspot.com.br/

    ResponderExcluir
  55. onde está esse código

    http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg

    você pode trocar as imagens

    ResponderExcluir
  56. Boa Tarde Fabiano....consegui fazer essa postagem popular....porem minha letra ta cinza e com as cores que coloquei de fundo tá meio ruim pra ver...queria colocar minha cor preta, como que eu mudo isso?

    olha aí: http://ouvir-pagoneja.blogspot.com.br/

    ResponderExcluir
  57. a cor das letras é nesta linha

    PopularPosts1 ul li a{font-size:12px;color:#444

    esse #444 é a cor, então pode alterar como quiser, veja aqui o Código das Cores

    ResponderExcluir
  58. ONDE ESTA O
    ... SO ACHEI NO SERÁ QUE É ESTE?

    ResponderExcluir
    Respostas
    1. não apareceu o trecho do código que você tentou postar, mas use o ctrl f para achar, veja aqui:

      Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F

      Excluir
  59. Tem como colocar para aparecer mais de 10 postagens?

    ResponderExcluir
  60. não dá para mostrar mais de 10 postagens no gadget de posts populares.

    talvez exista algum código mas seria uma forma de modificar o gadget e talvez deixe a pagina mais lenta.

    minha sugestão é usar o gadget padrão com 10 posts.

    ResponderExcluir