4.6.13

Comentarios personalizados

Boa noite meus cupcakes! Hoje eu trouxe mais um tutorial de como personalizar a area dos comentarios esse é bem facil e vocês podem editar se quiserem. Como foi um pedido eu fiz ele de acordo com as cores do blog de quem encomendou (roxo) mas se quiserem trocar a cor é só editar ok ?

Bom Vamos lá! Para personalizar seus comentarios, abra o Modelo HTML do blog, e cole o código a seguir acima de ]]></b:skin>



/*****************************INICIO COMENTARIOS - MY-PINK-CUPCAKE.BLOGSPOT.COM.BR*****************************/#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: #c19bdf; /*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: #d2b6e5; /*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: #d2b6e5; /*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: #e3c6f6; /*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: #684980 !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 PINK CUPCAKE NÃO RETIRE OS CRÉDITOS************/


Se houver algum erro (qualquer um mesmo que seja pequeno) não se esqueçam de me avisar, bye ;*

2 comentários:

  1. Nossa,obg flor ficou muuito bom. Vê lá !!! o3o

    ResponderExcluir
    Respostas
    1. Eu vi amr, ficou bom mesmo! Obrigada ヾ( ^ω^)ノ ),

      Excluir