Big tutorial - Como personalizar os comentários!

10:00


Os comentários são como as veias e artérias de um blog, importante e vitais para o blogueiro,postagens e  enfim para o blog. Por isso venho trazer hoje um Big Tutorial, para aprendemos a deixar esse espaço importante, mais lindo e atrativo!

  • Como trocar o background dos comentários
  • Como trocar o link postar comentário por um imagem!
  • Como personalizar todo o espaço dos comentários



Como trocar o background dos comentários..

Season 3 Glee - Photoshoot

 Esse é o primeiro e muito importante tutorial, um blog novo tem um background cinza horrível, isso espanta comentários, então, vamos aprender a transformar aquele cinza em uma imagem ou em outra cor!

Se você escolheu colocar um background em vez de uma cor, olhe se um desses backgrounds lhe agrada:



Uma dica muito importante é que quando for fazer uma grande alteração no html do blog, como a que está fazendo agora, é muito bom abrir o bloco de notas, salvar todo o código do blog lá, depois salve e feche por segurança, se algo der errado, assim vai ser fácil concertar depois.

Entre na aba editar html do seu blog, e pesquise (Ctrl+f) por:

#comments

A partir dessa parte é onde nós vamos modificar.... Dependendo se seu modelo não for personalizado deve aparecer logo abaixo disso o seguinte:

#comments {
 background: #FFFAFA; none repeat scroll top center;
padding: 15px;
}

A parte destacada em vermelho é aonde você vai editar, você pode colocar uma cor ou um background, se escolher cor entre neste site e copie o código da cor que for da sua preferência e cole no lugar daquele código. Se escolher background de imagem faça o seguinte:

Troque o código por:
url ( url da imagem ) 

Deverá ficar assim:

background: url ( url da imagem )  none repeat scroll top center;

Troque "url da imagem" , pela url original, visualize se estiver tudo bem salve!...

Como trocar o link postar comentário por uma imagem?

Season 3 Glee - Photoshoot

Vá em Design > Editar HTML marque a opção : expandir modelos de widgets. Pressione Ctrl + f e procure por:


<data:postCommentMsg/>

ou

<data:blogCommentMessage/>

Dependendo do seu template irá encontrar um dos dois códigos acima, daí você substituí pelo código abaixo:

<img src="url da imagem"/>

E onde tem URL da imagem, você coloca o endereço do botão ou imagem que ficará no lugar do link postar um comentário.

salve o modelo daí em outra guia no seu navegador vá conferir se a imagem aparece, se ela ainda não apareceu, volte para a página de seu html pressione Ctrl + f e procure novamente pelo código que você encontrou anteriormente:



<data:postCommentMsg/>

ou

<data:blogCommentMessage/>


Se encontrar novamente o código, o substitua novamente por:  


<img src="url da imagem"/>


Trocando onde tem url pelo endereço da imagem.
agora sim sua imagem terá aparecido.

P.S.: Isso acontece porque as vezes tem dois códigos repetidos, então é necessário modificar os dois.

Como personalizar todo o espaço dos comentários!

Season 3 Glee - Photoshoot

Este tutorial é o último dos três, mais de longe o mais importante! Eu descobri como fazer grandes alterações nos comments com este tutorial, gente é impossível não ficar bonito! O efeito é muito bom, vamos aprender?


A imagem acima, retrata exatamente como deve ficar o resultado, mas lembrando que o background que usei é branco, se no tutorial acima tiver usado outra cor ou uma imagem, deve ficar diferente, mas também vai ficar lindo, porque esse tutô é 10!

Vá em Designer editar html e procure: #comments , se você não encontrar pesquisando isso, vá descendo seu html devagarinho até achar as tags "comments", isso até que é fácil. Se você encontrou de primeira tudo bem.


#comments .comment-author {
padding-top: 1.5em;


#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: #75cfd8;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;


}
.avatar-image-container {
margin: .2em 0 0;


}
Este código de vermelho acima você deve apagar completamente, apague tudo. No lugar disso coloque o seguinte código, e no final olhe as dicas!...

#comments h4 {
background:url(
url da imagem);
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
}




#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;background:url(
url da imagem);
}
#comments-block .comment-author {
Font-weight: bold;
color:#FFB5C5;
font-size:12px;
margin:.5em 0;
font-family:tahoma;
height: 30px;
color:#FFB5C5;
line-height:2em;background:#F5DEB3;
}
#comments-block .comment-body {
background:url(url da imagem);
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
background:url(
url da imagem);
line-height: 1.4em;
color:#111;border: 20px #FFE4E1;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 75;
font-size: 11 px;
line-height:1.5em;
background:#f1f1f1;;
color:#111;border: 3px #535456;

}   

A partes do código que estão destacadas em vermelho , rosa e verde são as que poderá alterar

Vermelho : 1ª cor do Disse , 2ª cor da Data
Roxo Troque todos os links roxo por um background, ele vai ficar em baixo do texto do comment.
Verde : 
Se refere a barra com nome de cada comentarista .


Visualize se estiver tudo bem salve. Lembre-se que você tem o código do seu blog salvo no bloco de notas! Não se desespere se der algo errado! 

Abraços, espero que tenha gostado do Big Tutorial..
By:AndyReis

Você também pode gostar:

Comentários
14 Comentários

14 mil comentários

  1. Gostei do tutorial, só que em vez de usar um background eu coloquei o fundo branco. ^^


    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  2. oi amei o blog ! visita ? http://mnteen.blogspot.com

    obrigadoo

    ResponderExcluir
  3. Ooi!
    Acabo de ver seu blog, e achei ele uma graça! Ele é muito bem organizado!
    Estou seguindo (claro né! Eu não ia deixar de seguir seu blog) e adoraria sua visita em meu blog. Se gostar, segue!

    Beijos :D
    www.blogmodasdegarotas.blogspot.com

    ResponderExcluir
  4. Ahhh que massa andy adoreiii *-*
    é meio dificil dá medo de fazer :s
    rsrsrsrsrsrs mais prefiro não arriscar !!
    Otimo post '

    thegirlandboy.blogspot.com

    ResponderExcluir
  5. super fácil, to usando o primeiro. Logo depois vou testar este ultimo...
    beijão e amei

    ResponderExcluir
  6. Que bom que todos vocês gostaram, eu tentei fazer esse big tutorial bem fácil de ler e compreender! Espero que ficado assim! (^^)

    ResponderExcluir
  7. Tem Tag pra vc la no: http://blog-always-sweet-girl.blogspot.com/

    ResponderExcluir
  8. Adorei!!! ♥
    Big tutô bom demais!! (caipirei agora... kkkk)
    Puxa, que bom que vc já está de volta, Kumma!!
    Hmm que legal! Também amo a minha igreja!! (Igreja do Evangelho Quadrangular, conhece?!)
    Noossaa... heheehh
    vixi, estou ansiosa para ficar louca com os pontos que vc vai fazer!! eheh

    OBS.: Kumma, ESTA SEMANA estou estudando para provas e portanto ficará difícil para retribuir comments e ANOTAR OS PONTOS, por isso, peço paciência!! Começo a anotar os pontos e retribuir os comments a partir de segunda que vem! :/
    http://teenblogumblogpravoce.blogspot.com/

    ResponderExcluir
  9. O tutorial me serviu muito kkkkkk :D

    ResponderExcluir
  10. Não entendi os links em roxo :)

    lovelylittletoo.blogspot.pt

    ResponderExcluir

Já curtiu?

+ Lidas