10 de outubro de 2012

Tutorial - Área dos comentários personalizada.

                              

    Oi oi flores, tudo bem com vocês? - Bem, disse que traria um tutorial surpresa, agora já sabe, pelo nome. Mais, eu achei esse um pouco diferente, mais elaborado. Olhem o resultado:


Aí, vocês fazem do gosto de vocês, ah e uma coisa, onde está RESPONDER, é em HOVER a caixinha. Chique né? *oo* , vamos aprender.


  Vá em design  Editar HTML  Procure por ]]></b:skin>
  Achou? então cole esse código abaixo, acima da Tag que você achou.

/**=========== AREA GERAL DOS COMMENTS ===========**/.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(COLOQUE O URL DO FUNDO QUE DESEJAR) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */border-radius: 2px; /* bordas arredondadas no fundo- se não quiser apague essa linha */box-shadow:0 0 3px #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: #b5b5b5 !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 #d1c9d6 solid; /* borda encima da caixinha de comentário */border-radius: 2px; /* bordas arredondadas */box-shadow:0 0 3px #ccc, inset 0 0 3px #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: #c8bccf !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: #dedede !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: #b09eba !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: #d0c9d4 !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: #d4d4d4; /* 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:#e6e6e6; /* 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: 2px; /* 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] =======**/

       Onde a letra está em AZUL, você coloca um background de fundo. De preferencia, um background claro, para que enxergue a letra de quem comentou. Fácil, simples e util. Créditos:

                                                                                                                         Beijos, Ayla -v-

4 comentários:

  1. amei!!!! vou arrumar o meu!

    Amei o blog! Meu blog é novo, comecei hoje.. Pode seguir de volta? Obrigada :)
    Bjos
    http://unicornsecrets.blogspot.com.br

    ResponderExcluir
  2. Muito útil...
    Mais eu queria mudar esse modelo de comentários aki...
    Mais essa merda n sai...
    Desculpa pelo o "palavrão"
    Bjos

    ResponderExcluir
  3. Olá acabei de conhecer e estou te seguindo é sempre bom ver dicas sobre blogs!! *0*

    Te espero no meu tb e na minha fan page no face tb!!! 0/

    Bjinhus
    http://maquiagemdaclaudinha.blogspot.com.br/

    Segue a minha fan page tb para vc conhecer: http://facebook.com/blogmaquiagemdaclaudinha

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)