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 == "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://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.
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.
Fabiano, vc sabe de algum blog que usa esse gadget para dar como exemplo?
ResponderExcluirUhull, perfeito, First
ResponderExcluirestamos 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
ResponderExcluirEU TAVA FAZENDO ISSO E DEU ERRO, E OLHA QUE EU VISUALIZEI O BLOG E TAVA TUDO LEGAL :(
ResponderExcluirfabiano 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
ResponderExcluirJohni dos Santos
ResponderExcluiré 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.
VALEU! OBRIGADO, ÓTIMA DICA.
ResponderExcluirNão estou encontrando o trecho /* Variable definitions e acredito que em meu template não deve haver, como faço?
ResponderExcluirATENÇÃ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.
ResponderExcluirelvis jean
ResponderExcluirse não achou o trecho Variable definitions, então procure por
<Variable name="keycolor" description="
e coloque o código ante dele
Adorei, só achei código demais pra mim ausasuahuashua, mas vou tentar fazer *-*
ResponderExcluirwww.viverserfeliz-renata.blogspot.com.br
Procuro por /* Variable definitions e não aparece nada. Nem /* Variable definitions
ResponderExcluir==================== :/.
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.
Wilker
ResponderExcluirse não achou o variable.... procure pelo trecho
<Variable name="keycolor" description="Main Color"
e coloque o código antes dele
cara vc é incrivel parabens quiria saber mecher com codigos assim como vc.
ResponderExcluirNão to conseguindo, quando adiciono e o primeiro código abaixo do /* Variable definitions
ResponderExcluir====================
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
veja se não faltou algum detalhe no código ou se não apagou nada por engano.
ResponderExcluirmas 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;
Fabiano Roberto tem como excluir esses ´´baloes de contador de visitas`` q fica do lado do gadget
ResponderExcluirAnônimo quais balões?
ResponderExcluirEstes comm a numeração do lado(1,2,3,4...)
ResponderExcluirObrigado Fabiano pela dica do CSS, nele também pude diminuir a quantidade de postagens para 5.
ResponderExcluirVlw pela dica!
pode diminuir a quantidade de postagens diretamente no gadget de postagens populares se não quiser nem precisa modificar o código.
ResponderExcluirFabiano Roberto são estes balões aí que estão com o numero branco e o plano de fundo preto...
ResponderExcluirè só excluir
ResponderExcluir#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.
Amei essa dica, e gostei muito. Funcionou bem bacana no meu blog que estou iniciando... www.renovacaokids.com. obrigada!
ResponderExcluirMuito boa dica! Não conhecia nada similar!! Parabéns!! Sucesso! Abss
ResponderExcluirtem como mudar a cor das letras??e letras em negrito tem como fazer também??
ResponderExcluirFabiano 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á
ResponderExcluirAnonimo
ResponderExcluiras 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}
Junior acho que a questão é como publicou aquelas imagens no seu blog.
ResponderExcluirtente salvar a imagem no seu computador depois editar a postagem e enviar a imagem diretamente ao blogger assim aparecerá a miniatura.
Fabiano Roberto tem como separar as postagens populares com ma linha ????
ResponderExcluirEntre uma postagem e outra.
anonimo veja neste outro tutorial: Modificar Cores e Fazer Formatação no Gadget Postagens Populares
ResponderExcluirlá 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
Fabiano Roberto e linha pontilhada qual é o código???
ResponderExcluirPasse aí por favor...
linha pontilhada o código é border: dashed 1px #000;
ResponderExcluirFabiano Roberto não aparece cara as linhas!
ResponderExcluirporque?????
deve ter ficado algum código errado ou faltando, veja aqui sobre bordas: Colocar ou alterar as bordas
ResponderExcluirFabiano,tem como colocar 10 postagens?
ResponderExcluirSe tiver como faz?
Laura pode tentar esse tutorial: Quantidade de Posts por Pagina dos Marcadores
ResponderExcluirFabiano,esse é pelos marcadores,não queria mexer nos marcadores.
ResponderExcluirGostaria de saber se por esse código das postagens populares tem como aumentar para 10 ou só dá para ficar 7 mesmo?
Laura
ResponderExcluireu 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
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 ?
ResponderExcluirEsse foi o único que não mexi,por não saber o que fazer ai.
eu também não mexi no código, acho que é muito trabalho para pouco resultado
ResponderExcluiré porque o código tem muitos detalhes
ResponderExcluirFabiano,obrigada pela ajuda.Se eu conseguir venho aqui dizer.
ResponderExcluirsempre fica os mesmos posts !!tem como mudar isso???
ResponderExcluirAnônimo são as postagens mais visitadas do blog ou seja não podemos alterar a ordem que elas aparecem.
ResponderExcluirmas 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.
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
ResponderExcluiro que eu faço?
deve ter faltado alguma coisa no código na hora de copiar e colar no html do seu blog
ResponderExcluirFabiano,levei este código deu certinho,vou levar outras coisas.
ResponderExcluirObrigada.
Lindo fim de semana para você.
Olha ficou muito bom valeu.
ResponderExcluirFabiano,vim pegar de novo.
ResponderExcluirVou levar mais coisas.
Lindo fim de semana para vc,bjs
Amigos, o meu deu certo quando eu retirei o Group description="PopularPosts Backgrounds" selector="#PopularPosts2" , deixei as <Variable soltas. Grande código, parabéns!
ResponderExcluirComo que faz para colocar o numero de visualizações do lado das postagem popular ?
ResponderExcluiracho que não tem como colocar o numero de visitas de cada postagem
ResponderExcluirNão achei a linha!
ResponderExcluirSó achei essa linha serve?
ResponderExcluirqual linha? as das variaveis? se for pode procurar por
ResponderExcluir<Variable
e colocar junto com o restante das variaveis que achar
Tentei de tudo! Não deu certo! Eu sei mecher um pouco com Html, resolvi alguns problemas mas não deu certo!
ResponderExcluirJonathan Meneses muito obrigado pela dica.
ResponderExcluire imagino que saiba porque não publiquei seu comentário.
Olá. O meu blogue não tem o código /* Variable definitions
ResponderExcluir. Como eu faço ?
Wilker Augusto
ResponderExcluirprocure por Group description e provavelmente achará um lista com esses códigos então adicione o código que mostramos
Adorei. Lindo.
ResponderExcluirFabiano,
ResponderExcluirEu 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/
onde está esse código
ResponderExcluirhttp://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg
você pode trocar as imagens
Consegui....Vlwwwwwwww
ResponderExcluirBoa 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?
ResponderExcluirolha aí: http://ouvir-pagoneja.blogspot.com.br/
a cor das letras é nesta linha
ResponderExcluirPopularPosts1 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
Ficou lindo! Obrigada!
ResponderExcluirONDE ESTA O
ResponderExcluir... SO ACHEI NO SERÁ QUE É ESTE?
não apareceu o trecho do código que você tentou postar, mas use o ctrl f para achar, veja aqui:
ExcluirAchar Códigos na Pagina Editar HTML do Blogger - Ctrl F
Tem como colocar para aparecer mais de 10 postagens?
ResponderExcluirnão dá para mostrar mais de 10 postagens no gadget de posts populares.
ResponderExcluirtalvez 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.