Modificar Cores e Fazer Formatação no Gadget Postagens Populares

Vamos formatar o gadget de posts populares do blogspot e transformar seus links em botões usando códigos CSS para formatar o texto, colocar cor ou imagem de fundo e criar bordas em diversos estilos. Vamos mostrar como fazer isso com o Gadget Postagens Populares do Blog, mas pode ser utilizado para formatar qualquer gadget do blog.

personalizar gadgets do blogspot

Então vamos colocar os códigos para formatar o texto e links desse widget do blogger. Entre na pagina editar HTML procure por ]]></b:skin> e coloque esse trecho antes dele:

#PopularPosts1 .widget-content, #PopularPosts1 ul{padding: 0px;margin: 0px;}
#PopularPosts1 .item-content{ border: solid 1px  #000;color: #333;font-size: 12pt;margin-bottom:5px;padding: 2px;}
#PopularPosts1 a {color: #ff0000;}
#PopularPosts1 a:hover { color: #333;text-decoration: underline;}
#PopularPosts1 img{padding:0px;border: 1px dotted #000;}

Agora veja como personalizar cada parte do layout do gadget:

#PopularPosts1 .item-content - é cada item do gadget postagens populares ou seja você pode usar para colocar uma borda ou cor de fundo em cada item do gadget e também alterar os estilos de fontes

#PopularPosts1 a - aparência do texto do link, neste trecho você pode colocar uma cor e tamanho de fonte diferente somente no titulo da postagem que aparece no gadget de posts populares.

#PopularPosts1 a:hover - essa é a aparência do link quando o mouse está sobre ele. Recomendamos somente escolher uma cor e não alterar tamanho da letra nem colocar bordas senão seu blog ficará dando um "pulo" quando passa o mouse sobre o link devido ao titulo quando muda o tamanho da letra ocupar mais espaço.

#PopularPosts1 img - Aqui podemos colocar uma borda na imagem em miniatura que aparece no gadget, mas se não quiser borda então nem precisa colocar essa linha ou usar o código border:none; dentro das chaves deste código.

Tudo que falamos neste tutorial é feito com estilos CSS então veja aqui alguns tutoriais com dicas sobre CSS para ajudar a personalizar o seu blog:
Como Formatar o Texto do Blog
Colocar ou alterar as bordas
Diferença entre Margin e Padding - Alterar Template
Alterar cores dos links - CSS

Como já falamos no inicio esse tutorial serve para qualquer tipo de gadget basta usar o nome de estilo correto (#PopularPosts) para fazer uma formatação especial nos gadgets do seu blog, por exemplo para personalizar os marcadores do blog você deve usar o estilo #Label1 (veja como Personalizar gadgets do Blog). Claro que isso funciona com textos e imagens e cada tipo de acessórios têm algumas diferenças próprias devido ao padrão de layout do seu template e do blogger.

Usar esse tutorial não impede que você mostre somente os titulos dos posts com ou sem as imagens e resumos. O código apenas faz a formatação do que aparece na sua pagina portanto ele não altera em nada o modo de configurar esse acessorio para mostrar as postagens mais visitadas do blog.

14 comentários:

  1. Olá amigos,
    Já tirei bastante dúvidas aqui com vcs. Mas hoje preciso de uma dica direcionada para mim.
    Baixe um template da web e não consigo aumentar a fonte das postagens.
    Vejam meu blog www.arcecidadania.org
    Meu e-mail: arcecidadania@ig.com.br
    Aguardo ansioso uma resposta.
    Obrigado

    ResponderExcluir
  2. o tamanho da fonte do seu blog é neste trecho

    body{background: #EAEAEA url(http://3.bp.blogspot.com/-Ex3DSMbdLSs/TbDHW6fBxpI/AAAAAAAAE5g/XNu-PZ16U34/s1600/background.png) left top repeat-x;color:#333333;font-family:Arial,Helvetica,Sans-serif;font-size:13px;margin:0px;padding:0px 0px 0px 0px;}

    ou pode criar o estilo

    .post{font-size:16pt;}

    ResponderExcluir
  3. Muito obrigado amigo. Valeu mesmo.
    O que seria dos blogueiros se não existisse o Dicas Para Blogs?

    Valeu!!!!!!!!!!!!!

    ResponderExcluir
  4. Oi pessoal do Dicas estou com um problema estranho aliais não sei se é um problema que eu possa resolver mas talvez vocês saibam o que esta acontecendo. Bem eu estou criando um layout de animes ate aqui tudo bem então eu adicionei o botão google mais pela opçao do blogger mais uma vez até ai foi tudo tranquilo mas agor vem o estranho após eu e meu amigo clicarmos no botao ele adicionou nosso cliques e estava com dois mas no dia seguinte ele de alguma forma enloqueceu e ficou com >9.999 eu ja temtei remover e recolocar mas o negocio nao muda se vocês puderem me ajudar agradeço.
    Obrigado pela atenção

    ResponderExcluir
  5. Mello
    veja se não usou o botão com o link de alguma pagina de exemplo do google

    ResponderExcluir
  6. Olha eu aqui de novo!
    Meu blog tem um menu com as categorias das postagens: CONCURSOS > Concursos Municipais > etc...
    Sei como retirar o link da palavra concurso, porém a mãozinha do mause fica aparecendo como se tivesse o link. É possível mudar isso?

    ResponderExcluir
  7. Arce Cidadania deve ter algo assim no seu código
    cursor:pointer;

    então tem que apagar

    ResponderExcluir
  8. Passando para agradecer a ajuda com o botão do google + aparentemente o problema era este mesmo.
    Muito Obrigado Fabiano.

    ResponderExcluir
  9. como é que voce colocou essa caixa de comentários do facebook ao lado do original do blogger? Quero dizer: como você o incorporou ao blogger?

    favor, responmda-me!

    Grato, Louis

    ResponderExcluir
  10. tenho um blog e gostaria de por uma borda pelomenos nas postagens, mais não estou conseguindo, pode me ajudar, meu blog é esse, www.publicidadebn.blogspot.com. email lucasbatista35@hotmail.com

    ResponderExcluir
  11. Olá, muito bom seu site, gostaria de saber se tem como aumentar o número de postagens , tipo o limite é 10, tem como colocar 20? Favor, me responda por email também, enviando para galera.org@gmail.com

    Agradeço desde já.

    ResponderExcluir
  12. Edinei talvez seja possivel editando os códigos html, mas não tenho isso pronto então não posso ajudar no momento.

    mas colocar 20 postagens na pagina inicial pode fazer o blog ficar muito lento para carregar

    ResponderExcluir