Personalizando os comentários do blog

by - junho 22, 2013


~~Yoo minna-san
Hoje, pediram para eu ensinar como deixar a área dos comentários igual a daqui do blog.
Então eu decidi fazer melhor, vou ensinar dois estilos, um como é aqui no blog e o outro um bem fofinho que usava antigamente.
Para os dois é o mesmo processo, o que vai mudar são os códigos.

Os códigos são um pouco grande,  então clique em continue^^

1- Abra o painel do blogger>> Modelo>> Editar Html

Procure por isso:

<b:skin>...</b:skin>

Então clique nos pontinhos "..." para abrir a parte onde precisa ser alterada.
(Esse é um dos problemas do blogger, iniciantes, que ainda não sabem disso não
iram conseguir achar o que procuram.

2-Aperte Ctrl+F  e na caixinha de pesquisa e procure por /* Comments, você achará isso:
/* Comments
----------------------------------------------- */

Apague tudo Abaixo disso até /* Widgets (até ele, mas não apague ele junto) , mas em alguns modelos está diferente, 
Entenda, apague até mudar de seção.
E no lugar do que apagou cole o seguinte código escolhido.
Salve e pronto^^

Código



.comments{
width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/
margin:0 auto;
font-style: normal !important;
font-size: 12px !important;
font-family: verdana !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxi16YyQ8b0l8HzF7EBs1Le7MMEgyPRlMQklQxEbLJeQ9F9Dtlj_cCnS0zgIu41cn9i1kjWDVCGDTcc2obHtkwUetPEmOHOPEkB32QN2MLH3EroTZDO775GIKGbxOmyF_6grrmhPuVI89r/s1600/bcnew.png) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */
border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */
box-shadow:0 0 5px #aaa; /* sombra na caixa do fundo - se não quiser apague essa linha */
}
/**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/
.comments h3,.comments h4{
width: 98%;
padding: 7px;
margin: 10px 0 !important;
color: #87CEEB !important; /* cor da fonte */
text-align: center; /* alinhamento */
text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */
font-family:'Dancing Script' !important; /* fonte - se preferir troque */
font-size: 37px !important; /* tamanho do texto - se preferir troque */
}

/**= 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: #fff; /* cor do fundo da caixinha dos comentários */
margin-left: 23px;
padding: 0 15px 0 23px;
border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */
border-radius: 5px; /* bordas arredondadas */
box-shadow:0 0 3px #ccc, inset 0 0 11px #eee /* sombra na caixinha – apague se não quiser */
}
.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;
color: #CD96CD !important; /* cor da fonte do nome de quem comenta */
letter-spacing: 1px;
font-family:'Dancing Script'; /* fonte do nome de quem comenta */
font-size: 26px; /* tamanho da fonte */
text-shadow:1 1px #aaa; /* sombra na fonte do nome */
background: transparent;
padding: 4px 36px;
margin-left:-31px !important;
border-bottom-right-radius:10px;
margin-top:-2px
}
.comments .comments-content .user{
font-style:normal;
border:0;
color: #FF80BC !important;
letter-spacing:1px;
font-family:'Dancing Script';
font-size: 26px;
text-shadow: 0 1px #aaa;
background: transparent;
padding: 4px 36px;
margin-left: 11px !important;
border-bottom-right-radius:10px;margin-top:-2px
}
/*Nome do autor do comentário hover*/
.comments .comments-content .user a:hover {
text-decoration:none !important;
color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */
}
/* estilo da data */
.comments .comments-content .datetime a{
background: none !important;
font-family: times new roman; /* fonte - mude se desejar */
float: right; /* posicionamento */
font-size: 12px; /* tamanho da fonte da data */
color: #fff !important; /* cor da data */
border:0 !important;
margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/
}
/* estilo do avatar */
.avatar-image-container {
min-width: 60px; /* determina um mínimo de largura */
min-height: 60px; /* determina um mínimo de altura */
padding:0 !important;
margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */
margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */
position: absolute !important;
overflow: hidden !important;
background: #fff;
}
.avatar-image-container img {
border: 3px #EAEAEA solid; /* borda do avatar */
margin:0;
max-height: 48px;
min-height: 48px;
max-width: 48px;
min-width: 48px;
}
/**=========== TEXTO DO COMENTÁRIO ===========**/
.comments p{
font-size: 14px !important; /* tamanho da fonte do comentário */
font-family: Times new roman !important; */ fonte do comentário */
text-shadow: 0 1px #eee !important; /* sombra na fonte */
padding-left: 55px !important;
padding-bottom: 20px;
color: #888 !important /* cor do texto */
}
/**=========== BOTAO – RESPONDER ===========**/
/* botão responder do segundo nível */
.comments .continue a {
background: #87CEEB !important; /* cor do fundo */
color: #fff !important; /* cor da fonte */
float: right; /* posicionamento */
padding: 8px !important;
height: 10px !important;
line-height: 15px !important;
margin-top: -35px !important;
}
/* botão responder do primeiro nível, mais estilos para o botão do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size: 11px !important;
float: right;
height: 10px !important; /* altura do botão */
color: #fff !important; /* cor da fonte */
padding: 6px;
border: 0 !important;
line-height: 10px;
margin: 5px;
margin-left: 40px;
font-family: helvetica; /* fonte - mude se desejar*/
text-shadow: 0 0;
border-radius: .5em; /* bordas arredondadas */
background: #CD96CD; /* cor do fundo */
font-weight: 800;
box-shadow: 0 1px 2px #666 /* sombra no botão - apague a linha se não quiser */
}
/* botão hover*/
.comments .comment .comment-actions a:hover {
text-decoration:none !important;
background: #FF80BC; /* cor do fundo do botão hover */
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top: 40px;
padding: 0.5em 1em;
border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */
}
.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}

You May Also Like

19 Comentários

  1. Yoooo!

    adorei o tutorial os coments ficam mesmo kawaiis *--* arigatou^^

    estou usando !!(●ω●;)

    kissus >3<
    http://animes-de-otaku.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yoo... Que bom que gostou^^
      Se houver algum problema, não exite em me chamar, ok^^
      ~~Kissus^^

      Excluir
  2. O segundo estilo de comentário é do Go Imagines, né?

    ResponderExcluir
    Respostas
    1. Go imagines... Não conheço.
      O segundo estilo prendi num site desses de tutoriais para blog... Faz séculos eu acho... Mas eu costumo a guardar códigos nos blogs que eu faço sem motivos...Eu Mudei as cores e o Background... ele não era muito kawaii, era meio profissional... entendes...
      Tá muito parecido é? Espero que não^^
      ~~Kissus Isa-chan *3*

      Excluir
    2. Me lembrei o site^^
      foi o http://www.candylland.net/

      Excluir
    3. Ah, ok então xD
      Bringadinha por colocar o tutorial que eu pedi, mas... Posso te pedir mais um (maus vim aqui te atrapalhas, mas a maioria dos blogs de tutoriais não estão nem aí para o que os leitores pedem ¬¬). Ensina a colocar efeito nas imagens do blog, tipo o seu? Onegai ><

      Excluir
    4. Ah, já ia esquecendo e.e
      Quer fazer parceria? *u*

      Excluir
    5. Ok, irei fazer esse tutorial^^^
      Sim eu aceito, vou colocar você nos parceitos^^
      Fico muito feliz*----*
      ~~Kissus *3*

      Excluir
  3. Oieee Gaby >.< eu queria fazer parceria com o teu blog *O* SUPER FOOOOFO !!

    http://xxotakulovexx.blogspot.com.br/ aceita ?

    Beijoos

    ResponderExcluir
    Respostas
    1. Yoo*---*
      Sim, sim eu aceito^^ Fico muito honrada^^^
      Vou te colocar nos parceiros agorinha^^
      Obrigada=^.^= Mas o seu é bem mais fofo néhh^^^

      ~~kissus *3*

      Excluir
  4. Eu uso sempre o primeiro no meu blog porque acho uma fofura, ainda bem que gostou do meu mundinho, é um prazer ^.^
    Já sigo este blog há um tempo porque sempre tem postagens completas e resenhas exclusivas que não acho em mais nenhum blog otaku, espero que nunca desistam dele :D

    Há, encorajada pelo comentário anterior, se houverem vagas posso ser parceira também? *.*

    Arigatou, kissus da Any-san
    http://sou-uma-adolescente.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Seu blog é uma fofura mesmo^^
      Amei conhece-ló e sempre irei lá te encher o saco ú_ú rrsrs
      brink's...
      Sim, eu aceito a parceria e fico muito honrada^^
      Vou te adicionar nos parceiros agorinha~~
      ~~Kissus Any-san *3*
      Espero que volte sempre^^

      Excluir
    2. Sempre mesmo >.< Já adicionei você, arigatou! :D

      Excluir
  5. Super fofinho, nunca entendi outros tutos de ensinar a editar os coments ;3

    ResponderExcluir
  6. Oie *-*
    Eu não consegui fazer >< puxa vida eu tava tão ansiosa seguindo seus tutorial hahaha mas empaquei nesse ç.ç
    Eu acho que é porque não achei a parte do ...
    Poderia me ajudar, por favor? ><

    ResponderExcluir
    Respostas
    1. Yoo^^

      Olha, tirei um print para te ajudar^^
      http://3.bp.blogspot.com/-4MwktpdGnr4/Ug1FXjyc0CI/AAAAAAAADWo/NYEoQ8LPOBU/s320/Capturar.JPG

      Mesmo se vc não achar pelo CTRL+F, vai procurando que você
      acha^^

      ~~Kissus

      Excluir
    2. Opâ, esse link aki:

      http://3.bp.blogspot.com/-4MwktpdGnr4/Ug1FXjyc0CI/AAAAAAAADWo/NYEoQ8LPOBU/s1600/Capturar.JPG

      Excluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀`*) (*≧∀≦*) (=´∀`)人(´∀`=) ( ・ ▽ ・)
ヾ(*^▽^*)o, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)