22/03/2013

Personalizando comentários II

Ai como é bom voltar!
Como vão vocês? Ja estou de volta e espero que seja pra ficar mesmo, né?
Hoje trouxe mais um jeito de personalizar a área dos comentários. Ficou simples, porém cute, e fácil de fazer.
Eu estava lá mexendo nos códigos e foi saindo, espero que gostem. Lets go...

Ficou assim: (desculpem pela qualidade da imagem)
(Click)

Para saber como faz, basta ler abaixo.
Procure por #comments { e tecle enter duas vezes pois os dois primeiros que aparecer ficarão do mesmo jeito.
Assim que fizer o que se pede apague todo o código, que vai até .comments .continue { (antes de /* Widgets ). Você deve adicionar o código abaixo no lugar deste:
/**Área do comentários desenvolvida por Luiz Gustavo (BANGTEEN.BLOGSPOT.COM). Dê os devidos créditos**/
#comments {
border: 1px dotted #ccc; /**borda em volta da área**/
border-radius: 6px;
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
 /**Numero de comentários**/
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: #cd5c5c;
text-align: center;
font-family: tahoma;
text-transform: uppercase;
font-size: 16px;
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
/**Imagem do comentário**/
.avatar-image-container {
  margin: .2em 0 0;
border: 2px solid #cd5c5c;
-moz-border-radius: 1em 3em 1em 4em; border-radius: 1em 3em 1em 3em;
}
/* Comments
----------------------------------------------- */
#comments a {  /**Links**/
  color: #cd5c5c;
font-family: tahoma;
text-transform: uppercase;
border-bottom: 1px dotted #707070;
text-align: center;
}
#comments a:hover { /**hover dos links**/
color: #000;
text-decoration: none;
cursor: help;
border-bottom: 1px dotted  #cd5c5c;
}
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcS1zLpdB1doLJS7iCXLLf_WhoCHGN2lh790NyKvZV28W-C1nz5J7w);
}
.comments .comments-content .loadmore a {
  border-top:  1px dotted #707070;
  border-bottom: 1px dotted #707070;
}
.comments .comment-thread.inline-thread {
  background: #eee; /**cor de fundo da resposta**/
border: 1px dotted #ccc;
border-radius: 6px;
color: #707070;
}
.comments .continue {
  border-top: 1px dotted #707070; /**bordas gerais**/
}
                                                                                             /**Fim do código**/
+ Obrigado por me ajudar na meta. 300 seguidores, puxa. Obrigado mesmo. Novo layout em breve pra vocês, dessa vez da Christina Aguilera.

18 comentários:

  1. Adorei o código, ficou muito lindo :)
    Ainda bem que voltou Luiz, tive saudades.
    CAT GIRL

    ResponderExcluir
  2. Fiquei muito feliz com sua volta, Luiz! É pra ficar mesmo, né? Hehe... Tutorial perfeito, andava a procura de um assim já há algum tempo, com essa opção de resposta logo abaixo e tudo mais. Acho que vou usar no lay que estou planejando para o Jeito Único!

    Beijos ♥ Jeito Único

    ResponderExcluir
  3. Ficou muito bonito Luiz, você sempre acaba divando u3u
    Acho que irei usar esse código no meu próximo template. Senti muitas saudades ♥

    http://blog-bluesky.blogspot.com.br/

    ResponderExcluir
  4. Adorei *-----* O resultado fica lindo!!
    Bjs

    Escrita de Cabeceira --> Perfil

    ResponderExcluir
  5. Adorei o tutorial! Ficou lindo o resultado. *u*
    Estou louca pra ver o novo layout IWOEIWOEI' Parabéns pela meta de 300 seguidores! <3

    Designer Lovers

    ResponderExcluir
  6. Adorei o tutu , meus comentários já são personalizados !
    http://mr-kawaii.blogspot.com.br/

    ResponderExcluir
  7. Se meus comentários não já estivesse personalizado, eu usaria pois é lindo desse jeito que você ensinou.

    garotadifferente.blogspot.com

    ResponderExcluir
  8. Eu goste do tutorial!
    mas curto deixar área dos comentários simples, apesar de, do jeito que você ensinou, também ficar simples e lindo!

    Kisses <3
    Meu jardim Secreto (ou clique no perfil)

    ResponderExcluir
  9. Lindo esse jeitinho de personalizar os comentários, adorei, de verdade!!
    Anciosa para ver como vai ficar o novo layout *-*
    Beijos <3
    pqngarota.tk

    ResponderExcluir
  10. Fica muito lindo ^^
    Pode me ajudar? Meu blog Universe Chic foi hackeado recentemente e estou recomeçando
    Kisses ^^

    ResponderExcluir
  11. Omg, fico muito bonito ! Vou usar quando fazer algum Layout Free, salvei nos favoritos :3 Beijos
    wehearthtml.blogspot.com

    ResponderExcluir
  12. Adorei o tutorial, é sempre muito útil! E ficou lindo *o*
    Amei que tenha voltado, também voltei agora hahaha!
    Beijos,
    depoisdeveneza.blogspot.com.br

    ResponderExcluir
  13. Ameeeei! Com certeza vou usar no próximo layout. Já salvei nos favoritos! Quando tiver vaga pra afiliados, me avisa? ><

    KeepThisDream.blogspot.com

    ResponderExcluir
  14. Gaga♥♥ Ótimo tutorial, eu personalizo mas só troco o fundo por preguiça mesmo o3o'
    Chu♥~
    mutant-paradise.blogspot.com

    ResponderExcluir
  15. Ficou muito lindo, eu estava mesmo querendo personalizar a área de comentários do meu blog, vou tentar fazer lá, mas colocarei os créditos, tá? *-*

    Beijocas, I'm Fucking a Zombie. @pfvrsah (instagram)

    ResponderExcluir
  16. Ficou suuper fofo, parabéns :3 Acho que vou usar ele no próximo lay do meu blog :)

    Tem um tempinho? Eu e mais 5 amigos criamos um novo blog, para tentar melhorar a blogosfera, mas apenas 6 pessoas não vai dar. Gostariamos muito da sua visita ^.^

    Vai visitar? Se gostar e concordar com a nossa ideia, siga, comente e ganhe 6 seguidores em troca :)
    bigexplosion-original.blogspot.com

    ResponderExcluir
  17. Lindo o efeito!!
    Segue se gostar?
    garotadabolsa.blogspot.com

    ResponderExcluir
  18. Muito obrigada >.<
    Demorei muito para achar um estilo como esse , ficou muito lindo :D
    Obs.:Apaixonei pelo layout .

    ResponderExcluir

-Comente algo legal sobre o que achou do post
-Não xingue,seja amigável
-Afiliação só por comentário
-Sem plágios!
- Seguindo,segue de volta? Nem visito e nem sigo o blog