Área de Comentários igual a minha




YOOO ~~
Desculpem a falta de posts seus feios lindos. É que eu estou passando por problemas pessoais e familiares. É muito difícil uma escolha ficar em nossas mãos, e qualquer que seja a minha escolha, terá que prejudicar alguém, e eu não quero isso. Tenho até quarta-feira para decidir, e enquanto isso eu entro em depressão. Estou entre a felicidade e a fama, qual devo escolher?
Mas fugindo da dramatização e da minha infelicidade, me pediram na ask para mim fazer o tutorial ensinando fazer a área de comentários igual a minha. Vamos ver o tutorial?



Vá no seu editor de html, procure por <b:skin> e cole abaixo dessa tag esse código:


      /**=========== AREA GERAL DOS COMMENTS WITH YOU ===========**/
.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(http://imageshack.us/a/img254/289/tumblrlukoaevs521qjqzly.gif) !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: #ff99cc !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 # 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: #ff99cc !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: #ff99cc !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: #80c4a5 !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: #80c4a5 !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: #ed5aa4; /* 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: #ed5aa4; /* 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}
/**======= Fim [candylland.org] [goimagines.blogspot.com] [with-you-s2.blogspot.com] =======**/
Então, essa é a minha área de comentários, com botões, fundo e cores de acordo com o blog. Se você quiser diferente, basta mudar, está tudo explicadinho.
Kiss e me desculpem a falta de post, eu estou entrando em depressão.


32 comentários:

  1. haha, eu acho que esse eh o mais basico que existe xD
    -kissus-

    ResponderExcluir
  2. Acho lindo sua área de comentários, mas queria uma que combinasse com meu blog, desse estilo mais ou menos, mas sem fundo, e ao invés de rosa, com alguma cor que combinasse. Se não for pedir muito, teria como tu fazer um posts com o html? *-*
    www.espacegirl.com

    ResponderExcluir
    Respostas
    1. Obrigada, mas eu não entendi muito o que você quis dizer, poderia especificar?

      Excluir
  3. Estes tutoriais vão ser muito útil, quando eu for mexer no meu. É que tenho medo de mexer com html.

    ResponderExcluir
    Respostas
    1. Obrigada, ei não precisa ter medo não, é bem facinho e quase sempre nada dá errado.

      Excluir
  4. Sempre é melhor escolher a felicidade! Pois a fama um dia irá acabar, é depois vais se arrepender no futuro. Agora sobre o tutorial da área de comentários está tudo certinho. Eu sinceramente amo este modelo. Chu ~

    - Prince Otaku

    ResponderExcluir
    Respostas
    1. É verdade, vou tentar escolher o melhor. Obrigada por tudo Mikaze ♥

      Excluir
  5. Sua área dos comments é tão diva *OOO* Adorei o tutorial, -q

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
  6. Onw, Mandi, vai passar! Sempre escolha a felicidade, por mais que isso magoe um mais querido. Veja esse vídeo, se ajudar, ficarei feliz: http://www.youtube.com/watch?v=7oQVNDmJKKA
    Então, quanto ao tuto, amei! Amei, amei! Divo *u*
    Beijos!
    Ali.

    bonjour-uneglacee.blogspot.com

    ResponderExcluir
    Respostas
    1. Awwnnt, obrigada, amei o vídeo e obrigada por me ajudar :3
      E obrigada por gostar do tuto :D

      Excluir
  7. O código é um pouco grande, talvez use :)
    CAT GIRL

    ResponderExcluir
  8. Uhhaa! Eu dificilmente mudo minha área de comentários ~le preguiça
    Eu sempre lia os outros tutoriais e tinha que fazer um monte de coisas e eu acabava desanimando ;-;
    Mas, é tão simples *3*
    Já estou começando a preparar um novo layout, e acho que vou usar o tuto *-*
    Muito fácil >3<
    ~kissus

    ResponderExcluir
    Respostas
    1. kkkk obrigada sua fofa. Estou ansiosa pra ver o novo layout ♥

      Excluir
  9. o efeito é notável, e fica bem legal. A gente chega a perder a vontade de comentar em blogs sem essa parte personalizada. Afinal, os comentários são o maior elo entre o leitor e o autor do blog. bezzo, sarah
    http://agd-doce.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É verdade, eu concordo plenamente com você. E obrigada por gostar do tuto :D

      Excluir
  10. Fica bem legal esse efeito na área dos comentários.

    Flor, para participar da promoção você tem que se inscrever por aquele formulário. Não precisa ter conta nem nada. Ou você se longa com a conta do face, ou entra pelo email (qualquer) mesmo.
    Em caso de duvida, é só perguntar que eu respondo ^^

    David - Leitor Compulsivo

    ResponderExcluir
    Respostas
    1. Obrigada. Então, não estava aparecendo o formulário, mas vou ver se consigo :D

      Excluir
  11. Escolha sempre o caminho para felicidade! Problemas familiares são péssimos, espero que melhore logo !
    A sua área de comentários é muito linda, sempre quis aprender a fazer, mais nunca perguntei (vergonha?) UAHSUAHSAUHS. O tutorial ficou bem explicadinho, adorei ^^
    Beijos <3
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É verdade, obrigada sua fofa.
      Então, eu acho ela bonitinha, mas estou enjoando ashuashua

      Excluir
  12. A sua área de comentários é linda, mas eu acabei de mudar a minha :c
    Mas eu vou salvar esse tuto aqui no favoritos e vou usar no próximo layout!

    Beijos, Annie
    >>> nerdsfly.#blogspot.com.br <<<
    (Retire o jogo da velha (#), caso venha me fazer uma visitinha *U*)

    ResponderExcluir
    Respostas
    1. Obrigada sua linda, fico muito feliz por favoritar a página <3

      Excluir
  13. O tutorial ficou bem explicado, e a área de comentários fica muito fofo.
    Escolha sempre a felicidade!
    Diary Nerd | diary-nerd.blogspot.com.br

    ResponderExcluir
  14. adorei o tuto !!
    www.mymomentsz.blogspot.com

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ