Blog da Ketty: Tutorial: Área dos comentários pensonalizadas

sexta-feira, 18 de dezembro de 2015

Tutorial: Área dos comentários pensonalizadas


Olá meus amores, estou meio sumida! Confesso haha, mas vou compensar todos vocês. Pra resumir meu sumiço, minha amiga, vai se casar, e ela esta precisando da minha ajuda com os preparativos. E eu como uma boa amiga, não poderia deixar de ajudar ela haha.
Então, vamos ao post, ele é super rápido e mega fofo, eu achei ele no Goods Sweets. Espero que gostem!!


 Para começar vá até seu HTML, e clique dentro da caixa dos cógidos. Depois de um Ctrl F e cole na caixa de pesquisa que aparecer isso: ]]></b:skin> Dê enter no seu teclado e aparecerá o código pesquisado. Cole acima dele o seguinte:

/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM (EDITADO POR GOODS-SWEETS)*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #a67445; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background:url(http://i33.tinypic.com/k46otw.png); /*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: #df9bbb; /*Cor de fundo do nome do autor do comentário*/
opacity:0.6;
border: 2px dotted #c76d97; /*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*/
text-shadow: 1px 1px 1px #fff;
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
-webkit-mask-image: url(http://i36.tinypic.com/254vbpj.png); -moz-mask-image: url(http://i36.tinypic.com/254vbpj.png); -o-mask-image: url(http://i36.tinypic.com/254vbpj.png) mask-image: url(http://i36.tinypic.com/254vbpj.png);
/*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: #e07ba6; /*Fundo dos botões responder e excluir*/
border: 1px dotted #f561a0; /*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: #be9f82; /*Fundo dos botões responder e excluir quando passa o mouse*/
opacity:0.6;
border: 1px solid #8b7056 /*Borda dos botões responder e exluir quando passa o mouse*/
color: #b7456d; !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}
/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM (EDITADO POR GOODS-SWEETS) NÃO RETIRE OS CRÉDITOS************/


 Prontinho. Destaquei os códigos principais caso vocês queiram alterar algo. Gente, espero que tenham gostado do Tuto de hoje. E usem bastante. Beijooooos



6 comentários:

  1. Que legal :D
    Depois vou tentar!

    www.sempremorenaantenada.blogspot.com Bejoz

    ResponderExcluir
  2. Ai que lindo Layout Ketty!!!
    Vou pegar para ver como fica o meu bloguinho!!!
    Super lindo!!! me apaixonei!

    Querida, estou seguindo seu blog, Quando puder dá uma passada lá no meu e me siga também!
    www.kerlsfreire.blogspot.com
    Beijo!

    ResponderExcluir
    Respostas
    1. Que bom que gostou flor. Vai ficar lindo no seu haha Beijos e vou dar uma passadinha sim. Obrigada pela preferência!

      Excluir

Olá que bom que veio comentar aqui no Blog da Ketty!

-Sem chingamentos;
-Leio os comentários de crítica construtiva sempre;
-Deixe o link do seu blog;
-Se for reblogar deixe um aviso.

-Agradeço a atenção. Ketty.