30 de mai de 2015

Tutorial - Comentários Personalizados (Modelo |)

|| ||

Hi!
Todo com vocês com vocês? ◠‿◠ Eu estou bem ^^. Hoje eu trouxe um tutorial de comentários personalizados, e como não um nome de comentários, eu coloquei "Modelo |".
Enfim, quer aprender? Read More ♥

Primeiramente um preview:

Para aplicá-lo ao blog, vá em Modelo > Editar HTML e persquise por: ]]></b:skin>
Agora, acima dessa tag cole:

/**=========== 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(http://migre.me/aC1IZ) !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}
/**======= Fim [candylland.org] [goimagines.blogspot.com] =======**/

Eu acho que esse modelo fica muito legal, e lindo *o*.


E aí? Gostam desse modelo de comentários? Comentem o que acharam!
Abraços, Túlio

14 comentários:

  1. Oii ♥. Cara, esse modelo é muito lindo *0*. Só achei algumas coisas um pouco confusas, hehe XD. Talvez eu use esse modelo algum dia :D.
    Kisses candy ♥

    ResponderExcluir
    Respostas
    1. Eu também achei as coisas um pouco confusas, mesmo assim, ele é lindo!
      Espero que sim, ele é lindo <3
      Beijos!

      Excluir
  2. Olá amor, o modelo ta bem fofinho. Acho que já vi esse tutorial em algum lugar ><

    Rumbler.

    ResponderExcluir
    Respostas
    1. Oi o/
      Então, os devidos créditos estão em baixo.

      Excluir
  3. Oi :3 Eu estou bem também u-u/ ~eu acho que essa carinha nem existe e.e ~

    Eu acho esse modelinho bem fofo, principalmente com essas cores. Amo quando acho modelos prontos (ノ◕ヮ◕)ノ ~prazer, preguiça.
    Kissu *:・゚✧

    ResponderExcluir
    Respostas
    1. Hey Summer ♥ Que carinha engraçada u-u/ ~adotei :3~
      Eu também ^^ Pois é, não gosto de ficar editando... ~Olá, como vai?
      Beijos!

      Excluir
  4. Oe c:
    Achei o tutorial super simples e fácil, e fica muito fofinho <33
    Beijos!

    ResponderExcluir
  5. OOii Karr <3
    Eu não curti muito o modelo... Gosto de coisas mais simples, sabe? Sei lá, eheh xDD mas enfim.
    Beijão | Summer

    ResponderExcluir
  6. Túlio, super desculpa *heartssss* te confundi com a Kar fkdjgkgk MEU DEUS, QUE VERGONHA! Me mata, por favor, é muito sofrimento dbdfjg.
    É que eu sempre estava estava acostumada a comentar no Candy, me perdoe mesmo <3
    TÚLIO RAINHO *HEART*
    XX

    ResponderExcluir
    Respostas
    1. Tudo bem ashuasau' Acontece c:
      Obrigado *heart || 2*
      Até logo ☯

      Excluir

Hey Dreammer, como está? Vai comentar? Primeiro leia as regrinhas >u<
☆ Os comentários são moderados
☆ Sim, as vagas estão abertas para afiliados.
☆ Palavrões são permitidos desde que não forem usados para ofender
☆ Se não gostou e está disposto a começar uma briga, saia.
☆ Faça somente críticas construtivas
☆ Retribuo todos os comentários, só tenha paciência.
☆ Deixe o link do seu blog para eu poder visitá-lo X3
☆ If you don't speak portuguese, don't hesitate to comment in your language! Be Welcome!
☆ Si tú no hablas portugués, no vacile y comente in español. ¡Bienvenido!

(っ・з・)っ ~ ♥ (≧◡≦) (≧∇≦)(ó㉨ò) ┐ (´ー`)┌ 〈( ^.^)ノ ᕦ(ò_óˇ)ᕤ ᕙ(⇀‸↼‶)ᕗ (∩︵∩) (╯︵╰,) (╹◡╹) (◑.◑) (◐.̃◐) (・_・ヾ (´・_・`) 【・_・?】 ( ゚д゚) (。_゜) ⊙.☉ \(〇_o)/ (⊙﹏⊙✿) (◕﹏◕✿) (◕‿◕✿) (◕︿◕✿) (◡‿◡✿) (◠△◠✿) (◕ω◕✿) (◠ω◠✿) (◠︿◠✿) (◠﹏◠✿) (◠‿◠✿) (ノ⊙ヮ⊙) (╯°□°)╯ಠ_ಠ ( ̄。 ̄)~zzz (°ロ°)ヽ (゜∇゜)ノ (ノ◕ヮ◕)ノ (▰˘◡˘▰) (︶▽︶) (。・_・。) (・ェ-) (。◕ ‿ ◕。) ʘ‿ʘ ╮ (─▽─)╭ ᕦ(ò_óˇ)ᕤ (≧ω≦) (^▽^) ( ̄□ ̄) (¬_¬) (╥_╥) (╯3╰) (¬‿¬) (◣_◢) (≧o≦) (⋋▂⋌) (॓_॔) (─‿‿─) (∩︵∩) (⊙_◎) (。♥‿♥。) (~ ̄▽ ̄)~ ★~(◠‿◕✿) (∩˃o˂∩) ~ヾ(^∇^) (づ。◕‿‿◕。)づ (ノ◕ヮ◕)ノ*:・゚✧ (;一_一) (¬_¬) (¬‿¬) (◕ ‿ ◕)/