Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

18/04/2013

NOVO - Personalizar Comentários em "Formulário Incorporado" II

O Blogger infelizmente mudou o Editar HTML. Isso significa que terei de mudar a grande maioria dos tutoriais de template. A grande reforma já começou desde ontem; todos os tutos serão apenas atualizados (eles estarão com a palavra NOVO no início) e depois anunciarei quais já foram consertados pela Página do Face. Para demonstrar a mudança, trago um tutorial reblogado já pronto para o novo formato do editor de HTML, podem seguir com confiança!!!
Esse tutorial dará um estilo maravilhoso para a área dos comentários de quem usa a opção "Formulário Incorporado". Se você colocar o código direitinho, eles vão ficar mais ou menos assim:


Eu amei esse formato dos comentários principalmente pelo fato de que os avatares ficam grandes, e o nome do autor do comentário em destaque. Ficou do jeitinho com o qual eu sonhava.
Só tem um detalhe no código: seus comentários vão ficar sem data. Isso acontece pois alguns usuários que podem comentar no seu blog certamente tem um nome maior do que o normal (tem gente que tem praticamente uma oração no lugar do nome... Hehe), e um nome assim vai empurrar a data e deixar tudo torto. Mas não acho que isso seja grande perda, a data vai continuar aparecendo no seu painel e na visualização dinâmica, só vai ficar escondida no template normal.

Personalizando a área dos comentários:

Antes de tudo, faça uma cópia do código do seu template, ou um backup, ou teste os códigos num blog de testes. Lembrando que esse código é direcionada para templates que usem a área dos comentários incorporada abaixo da postagem, não garanto nada nos outros formatos.

  1. Entre em Modelo > Editar HTML (caixinha branca abaixo da miniatura do seu template);
  2. Clique em qualquer parte do seu código e depois aperte "Ctrl+F";
  3. Cole na caixinha que abriu no canto direito da caixa o código:  ]]></b:skin> e aperte a tecla "Enter";
  4. 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;
}

Os códigos acima estão formatados de forma igual a como está no DSM. Ao lado dos trechos destacados em negrito está a explicação do que aquele código modifica. 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.
Depois de colocar os códigos, salve o modelo , não tem como visualizar os comentários antes de salvar.

É esse o código. Se algo deu errado, verifique se você não apagou alguma coisa ou escreveu algo errado.

Mil Sweetkisses,
9 Comentários
Comentários

9 comentários:

  1. Eu não consigo fazer isso, de verdade! D:

    Beijos,
    Caroline, do Criticando por Aí

    ResponderExcluir
  2. Eu já coloquei no meu blog antes da mudança...usei o seu tutorial, aliás usei e repassei o link porque teve gente que gostou e perguntei como eu tinha feito :)

    ResponderExcluir
  3. Bem legal, adorei o blog ^^

    se puder visita? http://welcome-to-kawaii-land.blogspot.com.br/

    ResponderExcluir
  4. Não adianta, não consigo, valeu a tentativa! Adoro seu blog, mas acho, que você poderia ter explicado melhor! Bjs

    ResponderExcluir
  5. ahhhhhhhh eu simplismente ameeeeiiiii muuiiiiiito obg seguindo ok U-hu
    http://girlslinkedoficiall.blogspot.com/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados