![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
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”.
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 == "false"'> <b:if cond='data:showSnippets == "false"'> <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 == "false"'> <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).
Por último, se você quiser mudar as cores de cada barra é simples…
Entre em ► Modelo ► Personalizar ► Avançado ► PopularPosts Backgrounds
…e então selecione as cores que desejar.
Qualquer duvida use a área de comentários
Fantástico!!
Obrigado!
Olá Amigo.
Meu blog não tem a seguinte tag: /* Variable definitions
Essa e a primeira que você manda procurar, mas não tem em meu blog, não tem outro jeito de colora? entre em meu blog e veja se não é o meu template que tem algum erro http://www.helodicasblogger.com/
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!
Que bom que funcionou.
Meu Template não é daqueles que o blogger disponibiliza,eu coloquei o ES One será que funciona nele ?
Abraços…
Mauricio Lessa – perfildoblog.com
Funciona com certeza.
Boa tarde, no meu blog que estou fazendo eu coloquei e deu certinho porem a imagem miniatura não aparece mesmo a postagem tendo imagem!!
O seu blog não tem imagem. Por isso não aparece.
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!
Colega, seu blog não tem imagem, como você quer que apareça? Se não tem.
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.
Esquece… Não tinha reparado que estava copiando o código para os modelos clássicos.
Ótima dica. =)
o meu blog, não tem:
como faço?
O seu blog tem com certeza. Procure com mais atenção.
Valeu!
No meu não tem o código
/* Variable definitions
====================
comofaz? Tem outro código pra pesquizar ou substituir esse não?
Olha eu visitei o seu blog e observei que tem o codigo sim. Acho que você precisa observar com mais atenção.
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.
Pega em qualquer template é so ler corretamente o tutorial. Tem um codigo para modelos antigos e um codigo para os novos modelos do Goole
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…
Cara você é muito chato. Mas, já retirei. Olha vou fazer um tutorial em breve. Aguarde.
Valeu!
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?
Carol, não tem erro. Siga corretamente o tutorial, e vai dar certo.
Valeu!
Não achei
E nem algo similar. Alguém me ajuda?
Eu te afirmo com certez tem, eu fiz o template que você está usando, por isso tenho certeza que tem.
Valeu!
E agora me ajuda Kemuel ! Não tenho nada similar e nem mesmo o !!!!!!!!!!!!!!!!! E agora?
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.
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.
Já consegui ajustar a largura e a altura pelo código,bjoO!
Cara no meu blog nã otem o tal /* Variable definitions
====================
como é que eu faço?
Não tem problema; é so você colocar.
/* Variable definitions
====================
Coloque o codigo aqui e cole no seu blog
*/
Meu blog não tem o
E agora??
Oi, o meu blog não tem esse codigo:
e agora?
ja tentei com um similar, mas dava erro.
Colega eu te aconselho a ler o tutorial antes tentar colocar o gadget no seu blog. Ah! O seu blog tem esse codigo sim.
no meu to com um problema no numero do rank tipo 1,2,3,4,5 eles estão cortados como arrumar isso?
http://raqinfo.blogspot.com.br/
Você soube retirar os links do rodape do template que você está usando. Então deve saber resolver esse problema também. Não conte com minha ajuda.
No meu blog nao ta dando certo quando vou colocar o codigo debaixo da tag
/* Variable definitions
====================
aparece uma mensagens de erro??????????/// o que faço agora?//
Meus parabéns pelo belo trabalho,
excelente código, que o qual
funcionou muito bem em meu blog
parabens
bom,queria falar que me recomendaram esse blog é bom demais,ja li esse post varias vezes e outros,é sempre bom ver recomendações,ouvir falar que tem um site bom ai de rastreamento um tal de http://rastreamento.org alguem ja ouviu falar?sabe me falar se é bom?
No meu não tem a tag
/* Variable definitions
====================
nem a tag
Ainda tem geito de por essa maravilha no meu blog?
Colega você pode colocar, não tem problema. No seu caso você deve usar a segunda opção.
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.
Não conseguir colocar no meu blogger http://www.portalhx.blogspot.com não tem esse código
Fiz Tudo certo ,mas não apareceu as Cores Colorida apareceu só os numero . como q faço para parece as Cores ?? Funcionar em Qual quer Template ?
o meu template nao encontra o código /* Variable definitions , o que eu faço ?
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.
ai mano blog bom d+, mais so que eu não achei nada similar a esse código
Brutal!!!
Como faço para meter o títulos das postagens em bold no gadget?
No caso de não encontrar o código /* Variable definitions o que fazer?
Diego,
todos os templates de Blogger têm essa linha de código.
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
Adorei, ficou lindo no meu blog. Obrigada!