16/09/2012

personalizar a área dos comentários




Oi,hoje vou ensinar a personalizar a área dos comentários,aprendi no DOCE SONHO DE MENINA
é muito útil e fica bem fofinho,vejam o print:

CRÉDITOS DE IMAGEM:DOCE SONHO DE GAROTA

Para aprender a fazer clique em leia mais...

  1. Entre em Design > Editar HTML (painel antigo) ou Modelo > Editar HTML (caixinha branca abaixo da miniatura do seu template) e clique em "Prosseguir" (painel novo);
  2. Marque a caixinha "Expandir modelos de widgets";
  3. Aperte Ctrl+F (ou Editar > Localizar no seu navegador);
  4. Cole na caixinha que abriu o código: ]]></b:skin>
  5. Acima de ]]></b:skin> cole o código abaixo:
div.avatar-image-container {
   position: absolute !important;
   min-width: 60px;
   min-height: 60px;
   border: 5px solid palevioletred; /*cor da borda da imagem*/
   -moz-border-radius: 60px;
   -webkit-border-radius: 60px;
   border-radius: 60px 60px 60px 60px;
   padding: 0pt !important;
   box-shadow: 0pt 0pt 3px #cccccc;
   margin-left: -10px !important;
   margin-top: -12pt !important;
   background: palevioletred; /*Cor do fundo da imagem*/
}

div.avatar-image-container img {
   min-width: 60px;
   min-height: 60px;
   -moz-border-radius: 60px;
   -webkit-border-radius: 60px;
   border-radius: 60px;
}

#comments .comment-author {
   padding-top: 1.5em;
   font-size: 12px;
   text-align: left;
   border-top: 1px solid;
   background-position: 0 1.5em;
}

#comments .comment-author:first-child {
   text-align: left;
   padding-top: 0px;
   border-top: none;
}

.comments .comments-content .comment:last-child {
  padding: 2px;
  border-bottom: 3px solid palevioletred; /*Cor da borda inferior do último comentário*/
}

.comments .comments-content .comment:first-child {
  padding: 2px;
}

.avatar-image-container {
   margin: 0.2em 0pt 0pt;
}

#comments h4 {
  text-align: center;
  display: block;
  font-weight:bold;
}

.comments {
  font-style: normal !important;
  font-size: 12px !important; /*Tamanho da fonte dos comentários*/
  font-family: arial !important; /*Fonte dos comentários*/
  color: #482531*/Cor da fonte dos comentários*/
}

#commnet-form, .comment-form{
margin-bottom: 40px;
}

#comments-block {
  text-align: left;
  margin:10px auto;
  line-height:1.6em;
}

#comments-block .comment-author {
  text-align: left;
  margin:5px auto;
  padding:5px auto;
}

.blog-author-comment {
  margin:5px auto;
}

.blog-author-comment p{
  margin:5px auto;
}

#comments-block .comment-body {
  text-align: left;
  margin:.35em 0 0 auto;
  line-height: normal;
}

#comments-block .comment-footer {
  text-align: left;
  margin:-.25em 0 2em auto;
  line-height: 1.4em;
  margin:10px auto;
  text-transform:uppercase;
  letter-spacing:.1em;
}

#comments-block .comment-body p {
  text-align: left;
  margin:10px auto;
}

.deleted-comment {
   font-style:italic;
   color:gray;
}

#comments dl dd {
  padding: 0;
  margin: 0;
  line-height: 110%;
  text-align: left;
}

.comment {
  background: #F6DFE7; /*Cor de fundo dos comentários*/
  color: #482531; /*Cor da fonte dos comentários, coloque igual a anterior*/
  font-size: 12px; /*Tamanho da fonte dos comentários, coloque igual ao anterior*/
  border: 3px solid palevioletred; /*Cor da borda dos comentários*/
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
  border-radius: 20px 0px 20px 0px;
  padding-right:5px;-moz-box-shadow: 3px 3px 3px #cccccc;
  -webkit-box-shadow: 3px 3px 3px #cccccc;
  box-shadow: 3px 3px 3px #cccccc;
}

.comment a {
  color: deeppink; /*Cor do link*/
}

.comment a:hover {
  color: yellowgreen; /*Cor do link quando passamos o mouse*/
}

.comment-content {
  margin-right: 5px;
}

.comments .comments-content .comment-header, .comments .comments-content .comment-content {
  margin: 0pt 8pt 8px;
}

.comments .comments-content {
  margin-bottom: -50px;
}

#commentpaging {
float:right;
}

#commentpaging a {
margin-right:5px;
}

.comments .comments-content .comment-header, .comments .comments-content .comment-content {
0pt 0pt 8px;
}

.comments .comments-content .user a, .comments .comments-content .user {
  border: 0pt none;
  color: white !important; /*Cor do nome de quem comentou*/
  text-shadow: 0pt 1px rgb(153, 153, 153);
  font-family: Coming Soon !important; /*Fonte do nome de quem comentou*/
  font-size: 14px/*Tamanho do nome de quem comentou*/
  text-decoration: none;
  background: palevioletred; /*Cor do fundo do nome de quem comentou*/
  padding: 5px 12px;
  margin-left: -12px;
  border-bottom-right-radius: 10px;
  -moz-border-radius: 0px 0px 10px 0px;
  -webkit-border-radius: 0px 0px 10px 0px;

}

.comments .comment-block {
  position: static !important;
  background: transparent;
  margin-left: 23px;
  padding: 0pt 0pt 0pt 30px;
}

.comments .comment .comment-actions a, .comments .continue a {
  font-size: 11px !important;
  color: white !important; /*Cor da fonte dos botões responder e excluir*/
  padding: 3px 6px;
  border: 0pt none !important;
  line-height: 30px;
  margin: 3px;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
  -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
  background: palevioletred/*Cor de fundo dos botões responder e excluir*/
  font-weight: 800;
  box-shadow: 0pt 1px 2px rgb(102, 102, 102) inset;
}

.comments .continue a {
  color: #666666 !important; /*Cor da fonte do botão responder da direita*/
  float: right;
  padding: 0px 4px !important;
  height: 23px;
  line-height: 23px !important;
  margin-top: -53px !important;
  text-shadow: 0pt 0pt !important;
  background: white !important; /*Cor de fundo do botão responder da direita*/
  margin-right: 10px;
}

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

.comments .comments-content .icon.blog-author {
  display: none !important;
}

.comments .comments-content .datetime {
  display: none; /*Apaga a data*/
}

.comments .thread-toggle {
margin-bottom: 15px;
}

span.icon.user {
display: none !important;
}


 Mude apenas o que estiver em negrito, não toque nos outros códigos, ok? Só troque se você souber bem o que está fazendo...
Os trechos em vermelho são da cor das bordas dos comentários, se for trocar coloque a mesma cor em todos!!!
O trecho em azul deixa os comentários com só uma borda arredondada. Se quiser que eles fiquem com as quatro pontas arredondadas, coloque 20px em todos os números. Se não quiser arredondado, apague o trecho.
O trecho em verde coloca sombra nos comentários, se não quiser sombra, apague-o.

Espero que tenham  gostado!!
COMENTEM!!

9 comentários:

  1. Respostas
    1. OWW VALEU!!
      QUANTO TEMPO QUE NÃO PASSAVA NO SEU BLOG,ELE ESTÁ CADA VEZ MAIS LINDO!!

      BEIJOS!

      Excluir
  2. *O* OMG! Lindãao *O*, talvez eu o use no meu novo lay kkk, é preguiça de colocar e editar mesmo, por que eu já coloquei um lá e deu um trabalhaão, mais sabe este aí me seduziu *O* ~~ sei não se resisto xD beijones ~~

    kawaiitheworld.blogspot.com

    ResponderExcluir
  3. kkkk ele é mesmo lindo!!!
    fica muito fofo,pode crer!

    ResponderExcluir
  4. http pra vc://www.mangakaimangaka.blogspot.com.br/2012/09/tag-3.html

    ResponderExcluir
    Respostas
    1. VALEUUU VOU POSTAR NUMA MEGA POSTAGEM JUNTO COM OS OUTROS SELINHOS E TAGS OK?

      Excluir
  5. legal.Este ai e bem kawaii,so que eu prefiro alguns que a borda nos a avatares seja pequena . .-.

    ResponderExcluir
    Respostas
    1. EU GOSTO dos que tem borda grande,acho muito fofo

      Excluir
  6. ------------invasão espacial de pilota Samantha óó----------
    OLÁÁAÁ EU SOU UM ET Ò.Ó
    ---------Fim de invasão espacial :3 ---------------

    ResponderExcluir