Personalizando o gadget Postagens Populares

Personalizando o gadget Postagens Populares

6 10 99
Personalizando o gadget Postagens Populares 10 6 99
Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo.
No post Novo gadget – Postagens populares, ensinei como colocar o gadget na barra lateral (sidebar) do blog.
O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. Vejam um exemplo na imagem abaixo:
postagens-populares
Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger e fiz as alterações necessárias para o meu template.
Acredito que o código deve variar de template para template, mas vamos lá.
Entrem em design>editar HTML. Antes de ]]></b:skin>, colem o código abaixo:
#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}
A parte padding-left, se refere à distância que deve existir entre a imagem e o texto. Já padding-top, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template.

Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget:
#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{
border: 1px solid #ccc;
background: #efefef;
}

Para mudar a cor do resumo dos posts, acrescente este trecho:
.item-content{
color: #1d85dd;
}

Mude as cores a seu gosto. Se não sabe os códigos , acesse uma tabela de cores
O CSS final seria este, com as devidas modificações de acordo com cada template:
#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/
border: 1px solid #ccc;
background: #efefef;
}
.item-content{ /*Estilo para o resumo dos posts*/
color: #1d85dd;
}
ATUALIZAÇÃO: Para retirar o ícone que vem antes do texto, substitua:
#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}
por este outro código:
#PopularPosts1 li{ /*Estilo para retirar o ícone*/
background-image:none;
}
Este post foi criado à pedido de querida leitora Lucy – Amor e Paz Sem Fronteiras
Créditos de parte do código CSS ao Mundo Blogger, um dos meus blogs favoritos Smiley piscando
19 Comments
Comments
  1. Oi, Juliana

    Muito bom o post.
    Dia desses me perguntaram se eu tinha conseguido personalizar esse gadget. Eu não instalei, mas já vi em muitos blogs.

    "A Cesar o que é de Cesar" (ou de César?)rs
    Mais uma vez tu dá exemplo de como se faz um post legal sem deixar de indicar a fonte. Não sei porque as pessoas não fazem isso. Não dói nada.

    Forte abraço! =)

    ResponderExcluir
  2. Olá, Max!
    Esta questão de colocar fonte sempre foi essencial pra mim. Abração

    ResponderExcluir
  3. Oii Juliana eu sou novo aki no ''dicas blogger'' e num sei nada sobre blog (rsrs') e criei um da série Supernatural, keria perguntar se vooc pode me ajudar por favor, e ver oque eu devo colocar no meu blog... conto muito com a sua ajuda, AGradeço desde Jah

    ResponderExcluir
  4. Olá Ju querida!

    Puxa muito obrigada!
    Fiquei bem feliz hj ao entrar aqui e ver este post que eu tanto queria, para aplicar em meu blog, em template modelo DB :)

    Estava quase desistindo de usá-lo (o gadget) se não conseguisse personalizá-lo para ficar com um visual melhor.

    Mas neste artigo vc caprichou (como sempre) não só a resolver este problema de desconfiguração da imagem, como na personalização do mesmo.
    Vou lá ajeitar o meu e depois volto pra contar rsrs

    Parabéns ao M. Blogger pela parte dos códigos e meus parabéns a ti, pelo post sempre muito ilustrado e enriquecido com imagens.

    Muito obrigada mesmo Ju!!!

    Paz e muito sucesso a ti, sempre!
    Beijos ♥

    ResponderExcluir
  5. Olá, Lucy! Demorou, mas saiu rs
    Abração!

    ResponderExcluir
  6. Olá Ju

    Ficou bem interessante sua abordagem, eu que sou leiga em códigos consegui entender a função de cada código, ficou bem didático.

    Eu só queria saber como é que tira os ícones que aparecem ao lado de cada link dos posts populares, deixei eles com as imagens ao lado aparecendo, mas os icones continuam lá. sabe dizer que código precisa ser retirado pra tirar os ícones?

    Um Abraço :)

    @anakint

    ResponderExcluir
  7. Rafael, peço que leia atentamente os termos de uso do blog. Nós não aprovamos comentários fora do tema do post. Abri uma exceção para te explicar isso, já que você fez o mesmo comentário várias vezes.

    ResponderExcluir
  8. Olá, Ana!
    Ainda não descobri como tirar o ícone. Estou fazendo alguns testes aqui. Quem sabe a Clau venha nos salvar rs

    ResponderExcluir
  9. Ana, consegui retirar o ícone e atualizei o post ;) \o/

    ResponderExcluir
  10. Desculpa Juliana, desculpa mesmo naum sabia, kkk' se quiser naum precissa aceitar esse comentario, jah que os coments são apenas sobre apostagem (agora toh sabendo) rsrsr' mais se for me ajudar por favor me adicione no msn se puder: rafael_sp1997@hotmail.com se puder éh claro

    ResponderExcluir
  11. Rafael, acho que faltou você ler os Termos de Uso. Vou deixar o link pra você:
    http://www.dicasblogger.com.br/p/termos-e-condicoes-de-uso.html

    "Não estamos disponíveis para esclarecer dúvidas por email, Twitter ou MSN. "

    Quanto a te ajudar, tem 728 posts te esperando. Quer maior ajuda do que essa?

    Abraços

    ResponderExcluir
  12. eu li os termos querida, por isso que no meu antigo comentario eu pedi, pra vooc desculpas e pra não aceitar o comentario, desde que eu escrevi meu primeiro comentario aki no dicas blogger eu num kis tirar vooc ( eu uso termos educados, como por favor obrigado) mas vooc me trata com se fosse um Burro, e falow novamente sobre os termos... passando mal imagen minha pras outras pessoas, como no comentario anterior naum é necessario que aceite esse, pois naum tem nada a ver com o tema do seu post. Eu respeito seu trabalho e talz mas naum precissava desta arrogancia... obs: eu só escrevi sobre isso aki por que naum encontrei nenhum outro lugar sobre o meu ''assunto''

    ResponderExcluir
  13. Rafael, lamento se passei a impressão de arrogância. É que como você pediu DE NOVO pra que eu te ajudasse pelo MSN, imaginei que você não tivesse lido os termos de uso.

    Acho que agora podemos seguir em frente e dentro das normas do blog, né?

    Abraços

    ResponderExcluir
  14. Oi Ju,

    já apliquei as dicas deste tutorial e consegui finalmente e facilmente, mudar o visual deste gadget que tanto querida!

    Agora, vou ao outro post aprender a personalizá-lo ainda mais ;)

    Obrigada Ju!

    ResponderExcluir
  15. Oi Juliana

    Sou fã de seu blog e usei muitas dicas para o meu.

    Eu tenho um Top 10 posts mais lidos que fiz manualmente, mas queria muito usar este do blogger porque é mais prático, mas fica feio no meu template.
    Você sabe como reduzir o espaço entre as linhas?

    Abs
    Rogério

    ResponderExcluir
  16. Rogério, se leres o post atentamente descobres ;)
    Gostava de saber como ponho uma imagem (tipo a setinha que vem no exemplo) antes das letras...
    Desde já obrigado

    ResponderExcluir
  17. Juliana,
    Muito legal esse artigo.
    Estou aqui para dar uma dica:
    Eu experimentei colocar o efeito marquee, de rotação e consegui um acabamento deslizante gostei muito. Já postei no meu blog ensinando fazer, se quiser dar uma olhada será uma honra,
    Obrigado.
    Ah! Parabéns pelo seu maravilhoso blog ;)

    ResponderExcluir
  18. Muito bom, acabei de usá-lo em meu blog. Só fiz algumas mudanças. Outra hora, com mais tempo, o aperfeiçoo.

    ResponderExcluir
  19. Oi

    Eu tinha lido sim, mas como sou bem leigo não sabia alterar.
    Eu tinha 2 problemas.
    O primeiro foi resolvido colocando
    padding-top: 0px
    padding-bottom: 0px

    O segundo tive que colocar
    #PopularPosts1 1
    #PopularPosts1 2

    pois eu tinha 2 listas.

    De qualquer forma obrigado.

    olha ai uma dica para um próximo post no Dicas Blogger
    http://meme.yahoo.com/acriativos/p/hNM6nlz/

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top