Personalizando os comentários do blog
~~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^^
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}
19 Comentários
Yoooo!
ResponderExcluiradorei o tutorial os coments ficam mesmo kawaiis *--* arigatou^^
estou usando !!(●ω●;)
kissus >3<
http://animes-de-otaku.blogspot.com.br/
Yoo... Que bom que gostou^^
ExcluirSe houver algum problema, não exite em me chamar, ok^^
~~Kissus^^
O segundo estilo de comentário é do Go Imagines, né?
ResponderExcluirGo imagines... Não conheço.
ExcluirO 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*
Me lembrei o site^^
Excluirfoi o http://www.candylland.net/
Ah, ok então xD
ExcluirBringadinha 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 ><
Ah, já ia esquecendo e.e
ExcluirQuer fazer parceria? *u*
Ok, irei fazer esse tutorial^^^
ExcluirSim eu aceito, vou colocar você nos parceitos^^
Fico muito feliz*----*
~~Kissus *3*
Oieee Gaby >.< eu queria fazer parceria com o teu blog *O* SUPER FOOOOFO !!
ResponderExcluirhttp://xxotakulovexx.blogspot.com.br/ aceita ?
Beijoos
Yoo*---*
ExcluirSim, sim eu aceito^^ Fico muito honrada^^^
Vou te colocar nos parceiros agorinha^^
Obrigada=^.^= Mas o seu é bem mais fofo néhh^^^
~~kissus *3*
Eu uso sempre o primeiro no meu blog porque acho uma fofura, ainda bem que gostou do meu mundinho, é um prazer ^.^
ResponderExcluirJá 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/
Seu blog é uma fofura mesmo^^
ExcluirAmei 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^^
Sempre mesmo >.< Já adicionei você, arigatou! :D
Excluir^^ Obrigada Também +.+
ExcluirSuper fofinho, nunca entendi outros tutos de ensinar a editar os coments ;3
ResponderExcluirObrigada^^
ResponderExcluirOie *-*
ResponderExcluirEu 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? ><
Yoo^^
ExcluirOlha, 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
Opâ, esse link aki:
Excluirhttp://3.bp.blogspot.com/-4MwktpdGnr4/Ug1FXjyc0CI/AAAAAAAADWo/NYEoQ8LPOBU/s1600/Capturar.JPG
Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.
Kaomojis:
(*´∀`*) (*≧∀≦*) (=´∀`)人(´∀`=) ( ・ ▽ ・)
ヾ(*^▽^*)o, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)