Gadget Postagens Populares em escala de Cores para Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Recentemente redesenhei o gadget de postagens populares do meu blog e eu adicionei uma simpática forma de barras de cores, a pedido de um leitor do blog, hoje eu gostaria de compartilhar o truque que eu apliquei. Esse gadget exibe os melhores artigos do seu Blog em escala de cores. Um visual intuitivo, chamativo e simples. Veja como aplicar em seu Blog do Blogger.

O modelo que vamos ensinar aqui fica como na imagem abaixo e se ajusta às larguras da barra lateral (sidebar) do seu Blog no Blogger, funcionando bem dentro de um gadget do tipo “HTML/JavaScript”.

Dicas Blogger

Como adicionar gadget Postagens populares numerado e com barra de cores?

Para adicionar este truque, primeiro você deve remover o gadget de postagens populares, se você tiver no seu blog. Basta excluir da sua barra lateral.

Apos retirar o gadget postagens populares do seu blog entre no painel do Blogger, clique no menu “Modelo” depois no botão  “Editar HTMl”.

Procure pelo seguinte código:

/* Variable definitions
====================

Agora é preciso saber qual é o tipo de Template do seu Blog. Se for um modelo clássico, padrão do Blogger atual, use o seguinte código colando imediatamente abaixo do que foi indicado no item acima:

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

No caso de o seu template ser um modelo antigo (não o modelo padrão do blogger), então cole o seguinte código:

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

Agora procure pela linha ]]></b:skin> e cole o seguinte trecho imediatamente ANTES:

#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: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{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;}

Agora procure o seguinte: <b:section-contents id=’sidebar-right-1′> (ou um código similar) e logo abaixo cole o seguinte:

<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://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.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://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agora vá ao menu “Layout” e no gadget de Postagens populares que apareceu, seleciona o numero de postagens que deseja exibir (recomendo não mas do que 5).

dicas

Por último, se você quiser mudar as cores de cada barra é simples…
Entre em ► ModeloPersonalizarAvançado ► PopularPosts Backgrounds

Blogger Dicas blogger Designer do modelo
…e então selecione as cores que desejar.

Qualquer duvida use a área de comentários

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

52 Comentários

  1. No meu caso eu apliquei as cores direto no CSS sem criar as variáveis. É mais rápido. Coloquei o Gadget em qualquer lugar da sidebar que achei melhor.

    Parabéns por aplicar o gadget no blogger, isso até então só tinha no wordpress!

    Responder

  2. Como que faz para fazer aparecer a imagem? tipo as postagens do meu blog não tem “thumbnail” Leia Mais ou Continue! o modelo dele é o mystique!

    Responder

  3. Toda vez que tento implementar este recurso, o Blogger acusa um erro e não realiza a operação.

    Com mais alguém aconteceu? Pois outras mudanças no template eu consegui realizar tranquilamente.

    Responder

  4. só pega em template do blogger mesmo se for um baixado da net não pega. mais ta de parabens coloquei no meu blog de fotos e capas que tem o template original do blogger.

    Responder

  5. o cara por favor tira essa verificação de palavras que diz: PROVE QUE VOCÊ NÃO É UM ROBÔ. isso da raiva a todo mundo por isso muita gente num comenta, ah se puder fazer um tutorial para colocar comentarios de facebook no blog me manda um e-mail jaciaelfera1@gmail.com OBS: COM A LARGURA DE 493.
    VALEW…

    Responder

  6. Olá!

    Diz que tem erro: ” Declaração de variável inválida na skin da página: O nome da variável não pode ser informado duas vezes. Entrada: PopularPosts.background.color1 ”

    O que eu faço?

    Responder

    • Carol, eu visitei o seu blog e observei que o gadget postagens coloridas está funcionando em seu blog, observei inclusive que você postou esse tutorial postagens coloridas em seu blog; sem autorização e principalmente sem citar a fonte onde você copiou.

      Responder

  7. Kemuel, Eu fiz o tuto e ficou lindinho mais só tem um probleminha as fotos ficam passando com uma sobra pra fora como faço pra alinhar, centralizar a foto estava olhando o código e vou tentar mexer aqui na parte que coloco em cima de ]]> mais eu não sei mexer muito bem em HTML.
    BjoO, aguardo resposta.

    Responder

  8. Oopa! Muito bom o Gadget, parabéns, funcionou legal!

    No meu caso eu personalizei a CSS e não criei as variáveis, além disso um fundo colorido as vezes não fica tão legal assim em alguns blogs, mas você mudar isso tranquilamente para as cores de preferência e que fiquem adequadas a sua identidade visual.

    Responder

  9. Li por alto alguns dos comentários. Sem mudar o resto das cores do blog, será que dá para colocar o texto do gadget para preto e depois para branco, quando passas lá o cursor do rato, para branco e deixar em negrito. Quem sabe mudar também o tipo de letra. Será que tem como fazer isso?
    Se sim, dá uma ajuda para mim.

    Responder

  10. Marcos, parabéns!
    Simplesmente formidável esse código, principalmente porque podemos editar no Modelo do Blogger depois, sem ter que alterar as cores no HTML.

    Aderi demais haha.
    Abraços

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.