Post |Dicas blog, Pc

Mudar a aparência dos comentários do blogger usando Css

Mostrarei como personalizar os comentários de blogs do blogger, usando Css.

Vejo muita reclamação de que comentários tem tamanho e cor de fonte ruim, já vi casos de modelos onde os comentários não aparecem no post pela cor de fonte ser a mesma de fundo, isso ocorre as vezes em templates da web(antigos), para constatar se esse é o problema basta selecionar a página do post e, se eles aparecerem apenas se selecionado, é isso. Outra coisa que percebo, em vários modelos de Blogspot, é a falta de destaque que de para perceber de forma fácil onde termina um comentário e começa outro.

Para muita personalização você teria que entender de Css, mas esse post é mais direcionado a ajudar em coisas simples como cor e tamanho de fonte, e, quem quiser tentar fazer algo para diferenciar um pouco o começo de novo comentário, para que os visitantes vejam com facilidade onde outro comentarista começou a escrever, se bem que, se o avatar do comentário do blogger está ativado isso já ficará visível e é quase desnecessário mais estilos, mas, evite muita personalização para não fugir do estilo de seu modelo.

Conforme você vai lendo esse post ele ficará mais difícil porque mais abaixo estão personalizações mais avançadas.

Aconselho usar um blog de testes, clique, principalmente quem quer se dedicar e fazer algo mais 'espetacular', até para aprender e ver o que da certo, nesse caso não posso dizer faz isso ou coloque esse código que vai ficar assim ou assado, isso porque cada modelo é um pouco diferente.

Também é importante, sempre antes de se atirar a mexer no Css do HTML, ver se não existem opções de mudar coisas em designer do modelo do blogger

Primeiro, você precisa saber onde e como adiciona Css no blogger, clique, e depois:
Entender um pouco de Css:
A área dos comentários do blogger tem um 'nome', chama-se comments, sendo assim, podemos adicionar personalizações para essa área, vamos começar aumentando a fonte em mais 10% com a propriedade font-size, usaremos font-size:110%; Agora veja como ficará o código:#comments,.comments{font-size:110%;}

Deu para perceber que entre-chaves{} está a propriedade que aumenta a fonte e o valor é 110% Saiba que o tamanho normal da fonte é 100% e se eu tivesse colocado um valor menor de 100% a fonte seria menor, fique atento a cada caracter, pense no porque dele estar onde está.

Vamos a mais um exemplo, dessa vez, com a fonte ainda maior que a anterior e, a cor da fonte vermelha, para isso vamos com a propriedade color que é responsável pela cor de fonte, mas precisa ser seguida de um nome de cor escrito em inglês, usaremos color:red; Veja como ficará o código:#comments,.comments{font-size:130%;
color:red;}

Compare esse código com o outro acima, veja o que foi acrescentado, o código que foi alterado(valor) e onde foi adicionado{entre-chaves}, para ficar mais claro de você entender, vou dar mais uns exemplos:

Apenas cor da fonte verde para os comentários:#comments,.comments{color:green;}

Apenas diminuir o tamanho da fonte dos comentários:#comments,.comments{font-size:85%;}

Diminuir a fonte e deixá-la verde de uma vez:#comments,.comments{font-size:85%;

color:green;}

Geralmente cada área dentro de uma página tem um nome(Id e/ou class), comentários é comments para Id e também para class, e entre as chaves estão as propriedades com seus 'valores' e o caracter ponto-e-vírgula separam as propriedades, e se, por exemplo, você quisesse descobrir uma propriedade de fundo, bastaria fazer uma busca na web assim: 'Css propriedade de fundo', você encontraria alguns sites explicando sobre background, essa é a propriedade para fundo, já aviso, background é uma propriedade bem complexa.

Atenção, você percebeu que coloquei duas propriedades entre-chaves, isso é feito para organizar e economizar código e deixar a página mais leve e, se tomando como ponto de referencia os exemplos acima, você pode procurar no Css de seu Html se encontra uma dessas linhas de código:

#comments,.comments{
#comments {

.comments {

Se encontrar uma dessas no seu Css, você pode acrescentar propriedades antes do próximo fecha-chaves depois dela, as linhas acima todas tem a mesma função que é dar estilo para a área dos comentários, porém, a primeira linha é mais 'forte', só que estão incompletas porque é só para você observar e aprender.

Aprendeu, faça seu estilo

Na área de comentário existem outras áreas dentro, cada uma com seu nome, vou listar elas abaixo, e, se quiser usar, onde eu escrevi propriedades, você deve substituir por uma(ou mais) que faça aquilo que você quer, seja mudar a fonte, cor, etc. Além das propriedades acima(font-size e color), existem borda, margem, tipo de fonte e outras.
Outras áreas dentro dos comentários
Veja abaixo os nomes de classes de outras áreas dentro da área dos comentários, observe a imagem que mostra aproximadamente onde fica cada área.
Mudar a aparencia dos comentários do blogger com css
Título que mostra quantos comentários tem:

#comments h4,.comments h4{propriedades}

Mostra quem é o autor do comentário. Nome, avatar:

#comment .comment-author{propriedades}

Corpo do comentário, a frase que a pessoa comentou:

#comment .comment-body{propriedades}

Rodapé de cada comentário, onde fica a data do comentário:

#comment .comment-footer{propriedades}


Mas, como a data do comentário é um link, para personalizar a fonte devemos usar:

#comment .comment-footer a{propriedades}


Sabendo o nome de cada área, você pode personalizar aquela área em especifico.

Separar, ou destacar o fim de um comentário e inicio de outro

Vou mostrar como você pode usar uma borda na base do rodapé de cada post, assim, esse rodapé servirá como um 'separador' de cada comentário.

#comment .comment-footer{border-bottom:1px solid red;}

red é a cor vermelha da borda, e você pode usar outro nome de cor em inglês, nesse código acima, o que está entre-chaves é a propriedade borda de baixo, não é uma borda em toda a volta do rodapé de um comentário, é a borda só de baixo de cada comentário, isso faz parecer um separador(uma linha).

Fundo ou borda no comentarista para destacar e separar os comentários

A área onde fica o nome do comentarista dá para usar uma borda e imagem de fundo que pareça uma linha ou risco horizontal, ou, também dá para colocar um fundo em toda essa área, tanto para destacar ela como para ficar mais claro onde começa outro comentário.
Borda de topo do nome do autor do comentário
Para colocar uma borda no topo da área de identificação do comentarista vou mostrar 3 códigos e cada um com uma cor, branca, preta e cinza, você pode escolher um.

Borda ou traço branco:

#comment .comment-author{border-top:solid 1px white;display:block;}

Borda ou traço cinza:

#comment .comment-author{border-top:solid 1px gray;display:block;}

Borda ou traço preto:

#comment .comment-author{border-top:solid 1px black;display:block;}

Identificação do comentarista com fundo, para destacar e separar
Difícil

Para dar um destaque e também separar os comentários, é possível dar um fundo numa área, onde fica o nome do comentarista é um bom local, e, para deixar meio pronto para qualquer pessoa adicionar no blogger, eu criei 4 imagens semi-transparentes usando um editor grátis e bom para isso, essas 4 imagens são de duas cores, preto e branco, duas delas estão super opacas(semi-transparentes), com apenas 15% de cor e outras duas com 30% de cor, sendo assim, se você usar uma imagem branca e bem transparente em um layout azul, esse fundo ficará azul um pouco mais claro e se usar uma imagem preta bem transparente o azul irá parecer mais escuro, é um pouco difícil de explicar, o melhor é você aplicar os códigos abaixo em um blog de testes e ver como fica...

Fundo do comentarista com imagem mais clara 30%

#comment .comment-author,.comment-author{background-image: url(http://2.bp.blogspot.com/-LibU7UorO5M/Tnk6j54_v7I/AAAAAAAAFpA/xX3cpULcess/s1600/fundo-branco-30.png);

background-repeat:repeat-y;
background-position:38px;
display:block;}

Fundo do comentarista com imagem mais clara 15%

#comment .comment-author,.comment-author{background-image: url(http://3.bp.blogspot.com/-f9OwMeJaoKM/Tnk57YP69MI/AAAAAAAAFo4/LZEe_dWbEOE/s1600/fundo-branco-15.png);
background-repeat:repeat-y;
background-position:38px;
display:block;}

Fundo do comentarista com imagem mais escura 15%

#comment .comment-author,.comment-author{background-image: url(http://3.bp.blogspot.com/-9E7j1_9Y_G8/Tnk60sZRsjI/AAAAAAAAFpI/zmfEKPf3D6E/s1600/fundo-preto-15.png);
background-repeat:repeat-y;
background-position:38px;
display:block;}

Fundo do comentarista com imagem mais escura 30%

#comment .comment-author,.comment-author{background-image: url(http://4.bp.blogspot.com/-F77n12N5gEc/Tnk7OHx4I6I/AAAAAAAAFpQ/ZJVZSc2kp1g/s1600/fundo-preto-30.png);
background-repeat:repeat-y;
background-position:38px;
display:block;}

Nos códigos acima, entre parênteses() está o endereço Url da imagem e se você quiser pode substituir por outra, e, você pode mudar o número 38 para mais ou menos, ele irá regular se a imagem de fundo vai mais para a direita ou esquerda, se aumentar o número a imagem vai mais para a direita e se diminuir ele vai para a esquerda e assim ficará atrás do avatar, se você usar esses últimos códigos, deve procurar no seu Css por .comment-author e ver se, entre-chaves logo após .comment-author existe uma linha que começa com background-position: se tiver essa propriedade em .comment-author é bom que você apague aquela linha, pois ela irá interferir na posição vertical da imagem de fundo, prefira sempre um blog de teste.

56 comentários:

Como mudar a aparência dos comentários do blogger usando Css2011-09-21T06:54:00-03:00
  1. Já tentei, mas não consigo justificar o texto dentro dos comentários. Consegui justificar o texto do autor apenas.

    Responder
  2. Edson F.

    Você esqueceu um caracter fecha-chaves no seu Css, não é esse o problema...

    Para o texto do comentário, ou seja, a opinião que o visitante comentou, para ele é usado o nome de classe comment-body, no seu caso você quer o texto justificado, sendo assim, entre chaves está a propriedade para isso:

    .comment-body{text-align:justify;}

    Apenas se esse acima não funcionar, use esse que é mais garantido:

    #comments .comment-body,#comments dd.comment-body,dd.comment-body,.comment-body p,.comment-body{text-align:justify;}

    Para outros que quiserem usar a personalização da frase deixada pelo comentarista, pode usar um dos códigos acima, prefira tentar com o primeiro e substitua text-align:justify; por outras propriedades Css, como as da postagem acima, com cuidado para não deixar caracteres sobrando, no lugar errado ou faltando.

    Responder
  3. O problema é que não encontro o local exato pra aplicar o CSS. Meu template está muito, muito modificado.

    Responder
  4. Edson F.

    No começo do post eu disse qual a primeira coisa a se fazer e coloquei um link para "saber onde e como adiciona Css no blogger", é só o que posso fazer, o resto é com vocês.

    Responder
  5. Eu cheguei a ler, colocar o código antes de ]]>
    É que tentei localizar se já existia - e deve existir, claro, de alguma forma...
    De qualquer forma, muito obrigado!
    PS:a cima de ]]> infelizmente não funcionou

    Responder
  6. Eu de novo, peço desculpas deu certo sim, acima da tag ]]>
    Posso, caso não encontre o lugar exato, incluir os códigos CSS sempre acima desta TAG, não cria problemas futuramente para o layout do blog?

    Responder
  7. Edson F.

    Não terá problema se você colocar estilização correta exatamente antes/acima desse trecho de código:

    ]]></b:skin>

    Só que, se você ir colocando códigos Css e eles já existirem, isso poderá pesar cada vez mais seu blog, por exemplo, se no seu Css agora tem esse:

    .comment-body{text-align:justify;}

    e você passar a não querer mais texto justify o correto seria substituir apenas justify por outra, poderia fazer assim:

    .comment-body{text-align:center;}

    Agora, se você usar os dois, assim:

    .comment-body{text-align:justify;}
    .comment-body{text-align:center;}


    o ultimo de baixo vai 'mandar' mais e o de cima não terá efeito, assim, um deles, o que está acima passa a ser um "peso morto" para seu blog.

    Responder
  8. Entendi. Obrigado pela dica.

    Responder
  9. oi, eu queria mudar só o "0 comentários" sabe no post mesmo, tem como ?

    Responder
  10. Lore

    Se tiver uma maneira eu não conheço, uma vez dei uma olhada no modelo para ver se conseguia mas nada encontrei.

    Responder
  11. não consigo mudar a cor do fundo dos meu comentarios.agradeceria se você pudesse ajudar, Aqui está apenas um exemplo de como esta miha area de comentarios. http://www.coelhodrogado.com/2011/12/saiba-porque-ele-e-o-rei-do-photoshop.html?showComment=1322950769300#c4172850858785829446

    Responder
  12. Coelho Drogado

    Cara, a droga destrói os neurônios e fica difícil conseguir muita coisa. Brincadeiras a parte, você precisa entender a propriedade Css background, e, usando as dicas acima, você deve colocar essa propriedade entre-chaves para a área correta que você quer mudar, por exemplo, se quer mudar toda a área dos comentários para fundo verde, usaria isso:

    #comments,.comments{background-color:green;}

    Para mudar apenas o fundo de cada comentário:
    #comment .comment-body{background-color:green;}

    Esses códigos, você pode adicionar na parte de baixo do Css do HTML ou usar apenas a propriedade que está entre-chaves para adicionar no local correto para ele.

    Você pode ver como mudar aparência do seu comentário de autor do blog

    Responder
  13. Eu aqui denovo CZAR, vim só pra responde ao comentario da LORI... ela tá pedindo pra corrigi o Bug de 0,1 comentárioSS.


    nesse link é que eu corrigi o erro do meu template:
    http://www.compulsivo.com.br/2008/02/corrigir-bug-1-comentrios-no-blogger.html

    Responder
  14. Olá, eu queria por cor de fundo de cada comentário no blogger mas tentei já ai e não deu :( e deixar o meu diferente, como faço?

    Responder
  15. ps:os meus são comentários embutidos

    Responder
    ...Respostas
    1. Com a opção de resposta nos comentários mudou alguns dos códigos deles, com o novo código, você pode mudar o texto que a pessoa comentou tem uma classe de nome comment-content e para o fundo ficaria mais ou menos assim:

      .comment-content{background:red;}

      A cor red você pode trocar por nome de cores em inglês ou códigos hexadecimais, se a intenção é mudar o fundo de todos eles, no código que lhe passei acima muda .comment-content para #comments e pode adicionar no Css do Html.
      Quanto ao seu comentário do autor precisará aguardar, assim que der eu posto algo, se você for pesquisar algo sobre comentários, preste atenção para ver se o post foi escrito após a metade de janeiro de 2012, ou provavelmente estão desatualizados para os novos códigos de comentário.

    2. Adorei, muito obrigada!

      só mais uma coisinha, e pra botar borda arredondadas nos comentários, como faz?


      Obrigada

    3. Consegui aqui já, mas só mais uma pergunta! haha

      e para incluir o nome e o "responder" dentro da parte de fundo, sem deixar todo os comentários com plano de fundo, como faz?????


      Obrigada

    4. Se mais alguém quiser borda redonda pode buscar na web border-radius tem bastante informação sobre ela, é um pouco complicado, mas acho que não funciona no IE, talvez funcione nas novas versões.

      Para colocar fundo para cada comentário, de modo que fique visível onde começa e termina cada, pode um código parecido com:

      #comments li{background:red;}

      nesse código acima, talvez precise adicionar margin-top:9px; entre as chaves{} e aumentar ou diminuir o número 9 para distanciar os comentários.

    5. to com mais uma dúvida :( fodphopdff
      http://www.rosaepinkbyjana.com/2012/02/colecao-primavera-verao-zara-2012.html#comment-form dá uma olhadinha nos comentários desse blog


      Eu queria deixar assim... tipo trocar a fonte do nome dos autores dos comentários... e o fundo deles diferente do fundo da cor do comentário...


      Obrigadaaa

    6. Você pode usar uma personalização diferente, no meu comentário acima eu disse para personalizar #comments li mas para o que você quer o mais correto acho que seria:
      #comments .comment-block{estilos aqui}

      Depois personalizar o fundo do topo dos comentários:
      #comments .comment-header{background:red;}

      Depois o nome do autor do comentário:
      #comments .user, #comments .user a{estilos de fonte, etc aqui}

      Se precisar ver estilos e tipos de fonte clique aqui, mas, dependendo o tipo de fonte é preciso usar fontes incorporadas.

    7. Obrigada mesmo!!! você me deu uma baita ajuda! vou indicar seu blog lá no meu!


      vc tem um tutorial de como por as datas assim? http://blogmodernize-se.blogspot.com/


      Obrigada!!

    8. Lore obrigado, não tenho nada assim, vou ver se tem a opção de colocar só a o dia e mês bem abreviado e um modo fácil de fazer isso, aí eu faço um post, mas acho pouco provável porque foge um pouco dos padrões de modelos do blogger, e quando isso acontece fica difícil conseguir algo que funcione para a maioria dos modelos, e se não funciona para a maioria é melhor não fazer porque é perda de tempo para ambos os lados.

    9. hahahaha okkk! muito obrigada!!!!

    10. Ei, mais duas coisinhas! hahaha

      e vc tem um tutorial de como alterar os comentários ali no rodapé do post sabe??? http://www.desejosdemenina.com.br/ tipo aqui...
      botar uma imagem em baixo do número de comentários e aumentar o número e tal...

      e também como alterar as tags alii??
      foidhiofhfodf

      Juro que paro de encomodar :/

      Obrigada

    11. Mudar o link de comentários na Home-page da maneira que você viu, primeiro que foi removido a palavra comentário e substituído por uma imagem de fundo, é bom fazer essas coisas em um blog de testes, para remover a palavra comentários precisaria acessar o blogger e >Editar HTML e marcar a opção >Expandir modelo de widgets e remover esses trechos de códigos que tem mais que um de cada:

      <data:top.commentLabel/>
      e remover também:
      <data:top.commentLabelPlural/>

      Depois ficaria só o número, aí, teria que colocar uma imagem de fundo para ele, pode ser um círculo ou balão:

      .post-comment-link a{background:transparent url(ENDEREÇO URL COMPLETO DA IMAGEM) center no-repeat;padding:7px 5px;text-align:center;}

      Precisa substituir ENDEREÇO URL COMPLETO DA IMAGEM pelo url da imagem, o número 7 é um espaçamento que será criado para cima e para baixo do número de comentários e 5 para os lados e eles podes ser aumentados conforme tamanho da imagem, é bom deixar um bom espaço para quando o número for decimal ou quisera centesimal.

      Isso acima era só para o número, mas como a palavra comentários foi removida da Home, podemos substituir por uma imagem que diz comentários, os códigos Css:


      .post-comment-link{background:transparent url(ENDEREÇO URL COMPLETO DA IMAGEM) 15px 0px no-repeat;padding:18px;padding-right:244px;}

      O valor 15 é o alinhamento da imagem alinhado na esquerda e logo após ele o numero zero(0) é a partir do topo, ambos os números podem ser aumentados ou diminuídos para 'jogar' a imagem de fundo para baixo ou para o lado, depois, tem o valor de padding:18px que você pode usar para regular a altura, depois o valor 244 é um espaçamento que pode ser mudado e será usado para dar largura e permitir que a imagem de fundo que diz comentários apareça, os paddings aqui serão usados para preencher já que esse elemento estará quase vazio.

      Para as tags(marcadores)
      Fundo das tags:
      .post-labels{background:red url(ENDEREÇO URL COMPLETO DA IMAGEM) 0px 0px repeat; color:blue;}

      Substitua a cor blue por outro nome de cor básica em inglês ou apague color:blue se desnecessário, essa cor seria só para a palavra Tags/Marcadores, coloque o endereço da imagem e substitua red pelo nome de cor mais parecido com a imagem de fundo, ou use apenas cor de fundo:
      .post-labels{background:red; color:blue;}

      Cor de links dos marcadores na área de exibição dos posts:

      .post-labels a{color:red; /*-- outros estilos --*/}

      Os mesmos links ao passar o mouse:
      .post-labels a:hover{color:blue; /*-- outros estilos --*/}

      Com cuidado para não esquecer ou remover um caracter fundamental, pode apagar essas anotações de seu código:
      /*-- outros estilos --*/

    12. Ok, vou testar aqui! Obrigada haha


      http://breakfastatlores.blogspot.com/p/parceria.html
      Indiquei vc ai! haha

    13. Ok deu certinho!
      http://breakfastatlores.blogspot.com/
      olha ai, só queria botar os comentários para a esquerda!!!
      e afastar um pouco os marcadores dos comentárioss!!!


      Obrigadaaaaaaa

    14. Seu modelo tem dois elementos com a classe post-comment-link e sendo assim adicione no seu Css:
      .post-backlinks{background-image:none;}

      Isso porque o segundo elemento tem também a classe post-backlinks e isso irá impedir aquela imagem de fundo para o segundo elemento.

      Antes eu passei esse código para você alterar e adicionar:

      .post-comment-link{background:transparent url(ENDEREÇO URL COMPLETO DA IMAGEM) 15px 0px no-repeat;padding:18px;padding-right:244px;}

      Esse código é para o link de comentário na Home, e, antes do fecha chaves} dele você pode acrescentar margin-bottom:9px; e aumentar ou diminuir o número, isso pode afastar ele de um elemento que esteja abaixo, antes do fecha chaves você também pode acrecentar um float:left; ou para ir para o lado direito usar float:right; e se quiser do lado esquerdo, pode adicionar um margin-left:0px;

      Mostrei um código de estilo para o link do comentários que fica na home:

      .post-comment-link a{background:transparent url(ENDEREÇO URL COMPLETO DA IMAGEM) center no-repeat;padding:7px 5px;text-align:center;}

      Antes do fecha chaves} dele você pode acrescentar um margin-left:0px; e para reforçar o que você quer pode padding-left:9px; e alterar o número, esse padding vai ter 'mais força' que aquele já acrescentado porque ele está depois do outro, mas se você colocar um número muito pequeno ele pode 'cortar' um pedaço da imagem de fundo.

    15. Obrigada mesmo!!! deu certooooooooooo

  16. Obrigada mesmo!!


    O que eu botei para as bordas ficarem arredondadas foi:
    -moz-border-radius:10px; /* para Firefox e Flock*/
    -webkit-border-radius:10px; /* para Chrome e Safari */
    border-radius:10px;
    border:1px solid #f7486c /*--- Edite ---*/



    Obrigada!!!!

    Responder
  17. hahaha okkk!!!! vc manda mt bem! se vc descobrir como deixar o titulo do post do lado da data, me avisa dai! hahahaha que necessito!!!

    Responder
  18. Para isso a data precisa ter uma largura, você pode tentar os seguintes códigos para deixar a data do lado esquerdo:

    .date-outer{float:left;display:inline;}

    ou:

    h2.date-header{float:left;display:inline;}

    Se quiser que fique do lado direito:

    .date-outer{float:right; display:inline;}

    ou:

    h2.date-header{float:right; display:inline;}

    Eu aposto mais no segundo código h2.date-header e se não está especificada a largura, pode alterar o valor e acrescentar width:39px; antes do fecha-chaves}

    Responder
    ...Respostas
    1. obrigada mesmo, mas ele nao vai dar certooo pq o que usei para a data foi isso ó:

      #fecha {
      color:#ffffff; /*Edite a cor da data*/
      padding:30px 30px 0px 25px; /*Altere as margens internas da data*/
      margin-left:-50px; /*Margem externa direita*/
      float:left;
      text-align:center;
      border:1px none #dedede; /*Coloque borda se quiser*/
      list-style:none;
      display:block;
      background:url('http://2.bp.blogspot.com/-v9r74EwuJ9s/Tz7kYbUgeNI/AAAAAAAACJ4/ecCnP74H8qw/s1600/comentariocaixa+copy.png') no-repeat;
      }
      .fecha_dia {
      display:block;
      font-size:18px; /*Tamanho da fonte*/
      line-height:0px; /*Altura da Linha*/
      font-family:'Dancing Script';
      letter-spacing:-1px
      }
      .fecha_mes {
      font-size:10px; /*Tamanho da fonte*/
      line-height:30px; /*Altura da Linha*/
      text-transform:uppercase;
      display:block;
      }
      .fecha_anio {
      font-size:9px; /*Tamanho da fonte*/
      line-height:8px; /*Altura da Linha*/
      display:block;
      }


      eu usei esse tutorial ó:http://meninanerd.blogspot.com/2011/03/personalize-data-da-postagem.html

    2. Bom, Só para avisar os desavisados, para esse código funcionar ainda precisa de um Script que pega no post que você indicou, provavelmente você terá que alterar um estilo para a Id #fecha{ entre as chaves que estão os estilos para essa Id você pode tentar substituir display:block; por display:inline; e pode alterar o valor e acrescentar width:39px; antes do fecha-chaves}, isso dará um limite de largura para a DIV com Id #fecha que será criada pelo Script.

    3. ahahah não deu certo, mas não tem problema! quando vc fizer seu tutorial, eu vejo dai para ir passo a passo haha!

  19. eii, eu de novo! vccc sabe como fazer menu horizontal com sub aba????

    Obrigada!

    Responder
    ...Respostas
    1. Saber eu sei, só não sei se consigo explicar, mas vou pensar num mais modo simples de fazer isso, se der eu faço um post, mas antes tem dois outros posts que quero fazer primeiro.

    2. okkk, o menu horizontal com sub aba eu consigo por só que quando vou instalar no blogger na sidebar ele funciona mas acima do post não sabe???? sabe como colocar pelo o html mesmo???? Obrigadaaa

    3. Um menu possui muitas tags, provavelmente pode dar um erro, mas você pode tentar adicionar a parte em Html do menu acima ou abaixo de <div id='main-wrapper'> ou de <div id='content-wrapper'>

      Tenta fazer isso sem marcar a opção de Expandir modelos de gadgets

      Talvez você precise substituir "aspas duplas" por 'aspas simples' do código de seu menu.

    4. hahahaha obrigadaaa

  20. Parabéns!!! Consegui fazer no meu! Obrigado

    Responder
  21. Oi, tudo bom?

    Estou com uma dúvida, você pode me ajudar?

    Queria saber, como faz pra colocar o footer igual nesse blog http://www.isabelafreitas.com.br/

    Beijos

    Responder
    ...Respostas
    1. Implesmente usa uma imagem de fundo, clique para ver, a imagem tem a largura ajustada de maneira que fique os traços nas laterais, talvez poderia se feito assim:

      .post-footer{background:#000 url("http://3.bp.blogspot.com/-y3WmxW3MDhg/UA4KFvEDWeI/AAAAAAAACB8/G4yh-PmmXyc/s1600/post-footer.png") center repear-x;padding:9px;background-size:100%}

    2. Oi Lizandro.

      Então, é no footer do blogger, o final rosa.

  22. Como o post é sobre área de comentário eu pensei que era o footer de comentários, mas o que me chamou a atenção foi o footer do post por ser diferente, bom no caso do footer do blog que você indicou, a imagem era essa, acho que algo assim daria um resultado parecido:

    #footer,.footer{background:url(http://3.bp.blogspot.com/-TO8zQpsdlAo/UA4Ht9FIsnI/AAAAAAAAB_M/iqm66OsOM-U/s1600/bg-footer.png) top repear-y;}

    Responder
    ...Respostas
    1. Ah, desculpa rs. É que não achei nada sobre footer pra comentar.

      Então, não deu certo :/

      Olha http://amostrasimplesdesigner2.blogspot.com.br/ ele não ocupa inteiro de jeito nenhum.

    2. Desculpe, eu errei uma letra no comentário acima. Agora corrigido:

      #footer,.footer{background:url(http://3.bp.blogspot.com/-TO8zQpsdlAo/UA4Ht9FIsnI/AAAAAAAAB_M/iqm66OsOM-U/s1600/bg-footer.png) top repeat-y;}

    3. Oi!!! Não está dando certo :(

      Será que tenho que criar uma div especifica?

    4. Desculpe a demora em responder.
      Existe um 'objeto extranho' em seu HTML, eu nunca vi uma tag Html chamada <footer> o que geralmente existe são tags assim <div id='footer'> mas o fato de eu não ter visto não quer dizer que não exista ou pode ser uma novidade, já que muitas coisas novas são criadas, aí, para esse novo elemento a gente pode mudar um pouco o estilo Css que lhe passei acima, ficaria assim:

      footer,#footer,.footer{background:url(http://3.bp.blogspot.com/-TO8zQpsdlAo/UA4Ht9FIsnI/AAAAAAAAB_M/iqm66OsOM-U/s1600/bg-footer.png) top repeat-y;}

    5. Não deu certo. Mas sem problemas, já desisti rs.

      Tentei de tudo :(

    6. Oi!!! Então, eu dei uma mexida lá, consegui aumentar a altura e por a imagem, só não consigo mexer na largura.

      O código que usei foi

      .footer-inner {
      background-color:#FFBFBF;
      border:1px dashed;
      background:#dddddd url(http://4.bp.blogspot.com/-FKgZIh6Y-Ro/UAw5VX9ux5I/AAAAAAAABWg/LjOD6qQCMsQ/s1600/bg.jpg);
      width:960; margin:0 auto; height:250px;
      }

      Pode me ajudar? rs

    7. Provavelmente você viu com o Internet Explorer, ele não reconhece esse elemento <footer> que eu acho que vi ele no seu Html, se ele não reconhece ele também não aplica personalização dada para o nome dele.

      No ultimo código que você passou, acho que você quer aumentar a largura de um elemento com class='footer-inner' você precisa especificar o tipo de medida, se é em pixel, porcentagem ou outra, no caso acima o erro esta em width:960; você quiser usar pixel use width:960px;

    8. Eu vejo com o mozilla e chrome. Não uso o IE..

      Ah, sim, eu já tinha arrumado isso, só depois vi que tinha colado.

      Mas sem problemas, já desisti rs

      Obrigada pela atenção!

  23. eu só queria saber é como mudar a fonte do comentario tipo mudar da letra tradicional para:Freestyle Script...
    seu post me ajudou muito.
    obrigada

    Responder
    ...Respostas
    1. Você pode tentar modificar e adicionar esse trecho de código abaixo na parte do Css de seu modelo:

      #comments,.comments{font-family:'Freestyle Script', SECUNDARIA;}

      Ele funcionaria para os comentários da maioria dos modelos do blogger, mas, você deve saber que essa fonte só aparecerá para leitores que tiverem ela instalada no computador, portanto, substitua a palavra SECUNDARIA por um nome de tipo que seja padrão de computadores, como arial, verdana, etc.

      Para saber onde adiciona Css no blogger, clique aqui

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!