23 junho 2012

Como personalizar a aria dos comentários



Olá meus pandas de chocolate voadores (que exagero feio), hoje eu tenho um tutorial que vai deixar a area dos seus comentário bem melhor do que o estilo padrão.Uma coisa que eu coloquei nesse tutorial que é bem interessante é que em varios sites quando você pesquiza como personalizar a aria dos comentarioas sempre aparece o código referente ao modelo viagem e eu descobrir um código que se refere a outros modelos, Então vamos ao tutorial ??




Atenção, devido as alterações nos modelos do blogger, só sera passivel ver a alteração nos modelos configurados para abrir a area dos comentários em uma janela pop up


 Primeiro abra seu modelo e abra o HTML do seu blog e aperte ctrl+f ou F3 e procure por
                                         Código do modelo viagem e outros

#comments {
                                         Código para outros modelos
                 
.post-outer .comments {

Ao procura comments você irá achar um codigo assim

#comments { background: $(comments.background); padding: 15px; } #comments .comment-author { padding-top: 1.5em; } #comments h4, #comments .comment-author a, #comments .comment-timestamp a { color: $(post.title.text.color); } #comments .comment-author:first-child { padding-top: 0; border-top: none; } .avatar-image-container { margin: .2em 0 0; }

Aapague todo esse código e no lugar cole

#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */ margin:0; color:#ff4d8e; font-family: Lucida Handwriting; font-weight: normal; font-size:36px; text-shadow: none; } #comments-block .comment-author { /* O espaço do nome de quem comentou */ background: #FFF; /*Cor de fundo do nome de quem comentou*/ color: #8fddf6; /*Cor da fonte*/ font-family: Trebuchet MS; /*Nome da fonte*/ font-size:16px; /*Tamanho da fonte*/ border-bottom: double 3px #8fddf6; /*Borda de baixo do nome*/ padding: 5px; margin:.5em 0; height:30px; /*Altura do espaço do nome*/ font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/ } #comments-block .comment-author a:link { text-decoration: none; } #comments-block .comment-body { /* Area do texto do comentario */ background: #fac2e4; /*Fundo da área do comentário*/ margin-top: -2px; /*Margem externa do topo*/ padding: 5px; font-family:Trebuchet MS; /*Nome da Fonte*/ font-size: 12px;/*Tamanho da fonte*/ color:#000000; /*Cor da fonte*/ width: 500px; /*Largura da área dos comentários, altere de acordo com seu blog*/ /*Bordas arredondadas da área do comentário*/ -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; /*Fim do código da borda arredondada*/ } #comments-block .comment-footer { margin:7px 0 2em; line-height: 1.4em; font-size: 95%; /* tamanho da fonte da data do comentário */ text-align: right; /* alinhamento da data do comentário */ letter-spacing:.1em; } #comments-block .comment-footer a:link{ background: #b9ff46; /*Fundo da data do comentário*/ } .deleted-comment a { margin: 10px 0 2em; font-style: italic; color: #ccc; /*** cor do recado de 'comentário deletado' ***/ }

Caso você achou . post-outer .commentes { você vai achar um código exato ao esse ou mais ou menos assim

.post-outer .comments {
 margin-top: 2em; }
 E é so apagar essa parte e colar o mesmo código de edição dos comments

4 comentários:

  1. Haayw, amei demais o tutu, super diwo <3 Ah, quase me esqueci de falar que amei seu blog ^^ Logo quando entrei me deparei com um blog perfect *--* Já estou seguidno é claaro, como não? Lol pode me ajudar com a meta de 600 seguidores? Obg, vc é uma liinda ^^ Bezus Luuh
    Rawr Baby ~> teenstyle-official.blogspot.com

    ResponderExcluir
  2. Oi,vim conhecer o blog e adorei já estou seguindo, ótima semana beijos

    http://oi-euteamo.blogspot.com/

    ResponderExcluir
  3. Legal, adorei!
    Bjs -> imnanda.blogspot.com

    ResponderExcluir
  4. esse tutorial é muito bom!! os comentários ficam mais destacados!!

    Beijos!!
    Blog|Twitter

    ResponderExcluir

Visitinhas

contador grátis