15 de jul de 2012

Personalizando a área dos comentários


Heeey marshmallows, como estão? Bom, hoje vou ensinar vocês à pesonelizarem a área dos comentários do blog!! Então vamos lá:


Vá no seu blog > Em Modelo > Prosseguir > Dê um Ctrl + F e procure por /* Comments. Abaixo disso vai estar escrito mais ou menos isso:


/* Comments----------------------------------------------- */#comments a {  color: $(post.title.text.color);} .comments .comments-content .icon.blog-author {  background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);} .comments .comments-content .loadmore a {  border-top: 1px solid $(post.title.text.color);  border-bottom: 1px solid $(post.title.text.color);} .comments .comment-thread.inline-thread {  background: $(post.background.color);} .comments .continue {  border-top: 2px solid $(post.title.text.color);}

Abaixo disso, cole esse código:

/**======================================================================
AREA GERAL DOS COMMENTS========================================================================**/@font-face {font-family:'Fugaz One';font-style:normal;font-weight:400;src:local('Fugaz One'),local('FugazOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/fugazone/v3/foh--NswBHNPbRHy7yEyyD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')} .comments{width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */margin:0 auto;font-style:normal !important;font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */background:#fff url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcRH32JrBue783v9_ivzFvoenOigRer_6lnVV6O5BwolQxvq-N8eWw) /* IMAGEN DO FUNDO */}  /**=======================================================================HEADING DOS COMMENTS (1 comentario, 2 comentários...)========================================================================**/ .comments h4{width:98%;padding:7px;margin-bottom:10px;background: #FF69B4; /* COR DO FUNDO - se preferir troque */
color: #FFFFFF; /* COR DO TEXTO - se preferir troque */
font-family:'Fugaz One' !important;/* FONT-FAMILY - se preferir troque */font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */text-shadow:0 1px #fff;box-shadow:0 2px 3px #000000/* EFEITO SOMBRA */
} /** ==================================================================BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)====================================================================**/ 
.comments .comment-block {position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */background: #FF1493 !important; /* COR DO FUNDO */
padding:0.5em 1em;border-radius:5px !important;box-shadow:inset 0 1px 4px #aaa !important /* EFEITO FUNDO REBAIXADO*/} .comments .comments-content .comment {padding:20px 10px !important;margin-bottom:15px !important} /* estilos para o nome do autor do comentário */.comments .comments-content .user a{font-style:normal;border:0;margin-left:10px;color: #00FFFF !important;
text-shadow:0 1px #fff;font-family:'Fugaz One';background:none;padding-left:0} /* estilo da data */.comments .comments-content .datetime a{background:none;float:right;font-size:9px;color:#fff;} /* estilo do avatar */.avatar-image-container {min-width:60px; /* determina um minimo de largura */min-height:60px; /* determina um minimo de altura */border:5px #f7b solid; /* borda */border-radius:35px/10px; /* arredondamento */padding:0 !important;box-shadow:0 0 3px #ccc; /* sombra */margin-left:6px !important;margin-top:-1px !important;background:#fff;overflow:hidden /* hack para evitar serrilhado na imagem */} .avatar-image-container img {opacity:1.0; /* opacidade */margin:0;display:block;max-height:60px;min-height:60px;max-width:60px;min-width:60px;padding:0 !important;border-radius:35px/10px; /* arredondamento */overflow:hidden;border:0 !important;overflow:hidden /* hack para evitar serrilhado na imagem */}   /** ==================================================================TEXTO DO COMENTÁRIO====================================================================**/ 
.comments blockquote{background:transparent !important;border:0 !important;font-style:normal !important;font-size:12px !important;font-family:arial!important;text-shadow:0 0 !important;padding-left:20px !important;color:#777} /** ==================================================================BOTÕES - RESPONDER, EXCLUIR====================================================================**/ 
/* botao responder do segundo nível */.comments .continue a {float:right;padding:2px 4px!important;height:23px;line-height:23px !important;margin-top:-45px !important;text-shadow:0 0 none !important} /* botao responder do primeiro nível, mais estilos para o botao do segundo nível */.comments .comment .comment-actions a,.comments .continue a {font-size:11px !important;color: #FFD700 !important;
padding:3px 6px;border:0 !important;line-height:30px;margin:5px;margin-left:10px;font-family:trebuchet;text-shadow: 0 1px #fff !important;border-radius: .5em;box-shadow: 0 1px 2px rgba(0,0,0,.2);background: #ffe;background: -webkit-gradient(linear, left top, left bottom, from(#ffe), to(#ff1))!important;background: -moz-linear-gradient(top, #ffe, #ff1)!important;} /* botao hover*/.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {text-decoration:none !important;padding:6px} /* botao excluir */.comments .comment .item-control a{color:#fff !important;background: #48D1CC;
background: -webkit-gradient(linear, left top, left bottom, from(#f7a), to(#f9e)) !important;background: -moz-linear-gradient(top,#f7a,#f9e) !important;} /* estilos para bloco de respostas */.comments .comment-thread.inline-thread {background-color:transparent !important} .comments .comments-content .comment-replies {margin-top:1em;margin-left:56px !important} .comments .continue {border-top:0 !important} .comments .thread-toggle,.icon.blog-author {display:none !important} /** ==================================================================BONUS - estilos para formatação do texto dos comments====================================================================**/ 
.comments .comments-content a{background:#fee url(http://i4.photobucket.com/albums/y121/carolzits/dandara/free/mini_gifs/page4/PAGE4_34.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}  /** ==================================================================Fim [by Gabriela// http://depoimentoseperfis-prontos.com]====================================================================**/

Personalize como você quiser ou deixe assim e salve. Veja o resultado e prontinho, seus comentários estão mais fofos!! 



                               

7 comentários:

  1. Oii querida, tudo bem? Vim aqui te pertubar denovo kkk, é que eu queria saber como envia um selinho, ja procurei em muuuuuitos blogs mas eu não acho, entao resolvi pergunta para vc que sempre me ajuda. Se não for muito encomodo, vc poderia me ajudar ?

    Bjss

    ResponderExcluir
    Respostas
    1. Claro querida que posso te ajudar!! Vou fazer um post oks, beijos!

      Excluir
  2. Como muda o plano de fundo rosa do avatar?

    ResponderExcluir
    Respostas
    1. Procura isso aqui:

      /** ==================================================================
      BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)
      ====================================================================**/

      Debaixo disso vai ter:

      comments .comment-block {
      position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
      background: aqui você coloca a cor que você quiser !important; /* COR DO FUNDO */

      Excluir
  3. Porfavor comente a resposta no blog: http://www.meucantinhoadoidado.blogspot.com.br/

    pois estou fazendo o layout da minha tia e tenho também muita coisa para fazer então não posso checar outros blogs.

    ResponderExcluir
  4. e como troca a cor desse botão amarelo?

    ResponderExcluir
  5. Oi, eu sou digamos iniciante, começei a ter o meu blog estes dias, e queria que ele ficasse lindo e fofo. Igual ao seu. Tem como você me dar um tutorial de como fazer isso, tipo um tutorial só pra mim. Pode ser no e-mail. Por que esse turorial tá bem explicadinho, mais eu não me entendo com estes códigos. Tem como vc me ajudar? Por Favor me responde!

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.