Modificar Cores e Fazer Formatação no Gadget Postagens Populares - Dicas para Blogs
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.
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 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 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.
Anônimo 20 maio, 2012 02:52
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.
Fabiano Roberto 20 maio, 2012 11:56
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;}
Anônimo 20 maio, 2012 15:32
Muito obrigado amigo. Valeu mesmo.
O que seria dos blogueiros se não existisse o Dicas Para Blogs?
Mello 20 maio, 2012 15:35
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.
Fabiano Roberto 20 maio, 2012 21:56
veja se não usou o botão com o link de alguma pagina de exemplo do google
Anônimo 21 maio, 2012 09:16
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?
Fabiano Roberto 21 maio, 2012 10:19
Arce Cidadania deve ter algo assim no seu código
então tem que apagar
Mello 21 maio, 2012 21:55
Passando para agradecer a ajuda com o botão do google + aparentemente o problema era este mesmo.
Louis Kasumi 30 maio, 2012 23:18
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
Fabiano Roberto 30 maio, 2012 23:21
veja aqui o tutorial que usamos: Como Usar Comentários do Facebook e do Blogger ao Mesmo Tempo
Lucas 09 novembro, 2012 22:48
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
Fabiano Roberto 10 novembro, 2012 00:00
Lucas veja essa postagem sobre bordas:
Unknown 23 maio, 2013 18:44
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
Fabiano Roberto 23 maio, 2013 23:47
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
Botão adicionar Gadget no Blogger (Add to Blogger) Criar e Colocar um Menu com SubMenu com CSS no Blog Postar Foto com Link no Facebook Códigos para Modificar de Gadgets/Templates no Blogger Espaçamento entre Linhas, Letras ou Palavras usando CSS/HTML Contador de seguidores para o twitter