30 de julho de 2013

Personalizar comentários



Olá cupcakes de morango ! Hoje trago um tutorial que uma leitora me pediu, ele é bem simples e que deixa o blog com uma cara mais sofisticada. É o tutorial de como personalizar a área dos comentários, vai ficar igual os comentários aqui do blog. Espero que gostem, o código é do blog Cherry Bomb, e a explicação é minha. Vamos lá:

Vá em modelo>editar HTML> pesquise por ]]></b:skin> e ACIMA disso cole isso:


}
/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #c19bdf; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background: #fff; /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}

.comment-header {
background: #D36394; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #9e80b6; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #fff !important; /*Cor do nome do autor do comentário*/
font-family: Verdana; /*Fonte do nome do autor do comentário*/
font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/}
.comment-header a:hover { color: #684980 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}

.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinha á direita*/
line-height: 16px; /*Altura da linha da data e hora*/}

.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/
position: relative;
background: #e7dceb; /*Fundo do bloco de texto do comentário*/
border: 1px solid #cdc3d0; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #D36394; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}

.comments .avatar-image-container img{
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}

.comments .comment .comment-actions a {
padding: 5px;
background: #D36394; /*Fundo dos botões responder e excluir*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir*/
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
font-family: verdana; /*Fonte dos botões responder e excluir*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}

.comments .comment .comment-actions a:hover {
background: #A45BA7; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #D36394 !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}

.comments .continue { border-top: none;}
.comments .continue a {display: none;}

/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS************/


Visualize e se der tudo certo é só salvar e pronto !
Espero que usem e creditem, beijoos flores do meu jardim ;*

12 comentários:

  1. amei o tuto *3*

    xoxo,
    isabellanani.blogspot.com

    ResponderExcluir
  2. Obrigado por fazer :)
    Www.tudoparaseuphotoscapeface.blogspot.com

    ResponderExcluir
    Respostas
    1. De nada flor, precisando é só pedir ^^
      Beijo !

      Excluir
  3. Oiie Tudo bom? meu nome e Maria amey seu blog e excelente e tem um ótimo conteudo, estou seguindo ese puder retribuir eu ficaria feliz!!
    Beijoss
    Lovely Things



    ResponderExcluir
  4. Olá,
    Amei seu blog ele é muio fofo se puder retribuir a visita segue meu blog e curte minha página.

    Blog:
    http://femmemakiup.blogspot.com.br/

    Página:
    https://www.facebook.com/Luisamakiup

    Obrigada!

    ResponderExcluir
  5. Foi Muito Util Esse Tutu,Tava Procurando Mesmo,Vc Poderia seguir E Curtir A Página,Eu Ainda To Começando O Blog,Obrigadinha Flor.
    Blog:
    barbie-the-monster-high.blogspot.com.br
    Página:
    https://www.facebook.com/EuAmoABarbie

    ResponderExcluir
    Respostas
    1. Obrigada flor, bem vinda ao blog! Não achei o Gadgets de seguidores no seu blog flor :(
      Beijo!

      Excluir
    2. Me Dei Por Conta Só Agora Não Tinha Colocado,Mas Depois Eu Coloco,Beijinho.

      Excluir
    3. Ok flor, quando colocar me avisa tah, beijo!

      Excluir