The Moon Reverse ミ✩: Modelo - Base para comentários

12 de julho de 2015

Modelo - Base para comentários

Olá, meus amores! (づ ̄ ³ ̄)づ Espero que estejam bem, se não estiverem, melhoras q Bom, fico feliz com o blog, é bem mais "lícito" entrar e poder ter algo para atualizar, fazer, etc... Bom, hoje para tutorial trouxe algo que, creio eu que sirva bastante e talvez seja importante. A Roh primeiramente me deu a ideia de trazer algo assim, então achei que seria útil a todos que gostam de criar seus próprios modelos. Nesse modelo eu coloquei uma explicaçãozinha ao lado de alguns códigos importantes para vocês terem um melhor reconhecimento. Se usarem creditem pela base e não pelo modelo, obviamente. Obrigada e até a próxima, amores  (*⌒∇⌒*)



☆ Base "inicial": Mundo Blogger (Se quiser creditar também)
☆ Base editada: The Moon Reverse

Então minha gente, aqui está a base e espero que vocês entendam as "explicações" contidas nos códigos da base.

01. Substitua todo o código de /* Comments pelo código do blockquote abaixo.
.comments{ /* Conteúdo que vem acima do h4, fonte do texto dos comentários */
clear:both;
background-color: none;
margin-top: -5px;
margin-bottom:0;
line-height:18px;
font-size: 11px;
}
.comments .comments-content{ /* Fundo da área de comentários (Corpo) */
margin-bottom: 6px;
font-weight:normal;
text-align: justify; /* Alinhagem do texto */
background: transparent; /* Deixe assim se não quiser um fundo */
}
.comments .comment .comment-actions a,.comments .comment .continue a{
background: #e8e8e8;  /* Cor de fundo do botão responder */
border:1px solid #C0C0C0; /* Borda do botão responder */
padding-top: 2px; /* Acolchoamento de cima */
padding-bottom: 2px; /* Acolchoamento de baixo */
padding-left: 3px; /* Acolchoamento da esquerda */
padding-right: 3px; /* Acolchoamento da direita */
margin-bottom: 3px; /* Espaçamento externo de baixo */
margin-left: 2px; /* Espaçamento externo da esquerda */
margin-right: 2px; /* Espaçamento externo da direita */
display:inline-block; /* Para que fique em caixas */
text-align:center;
text-decoration:none;
width: 54px; /* Largura do botão responder */
line-height: 17px;
font-weight: normal;
cursor: pointer;
font-family: "Calibri";
font-size: 11px;
color: #999;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /* Botão hover */
text-decoration: none;
background:#fff;
border:1px solid #999;
}
.comments .comments-content .datetime a{ /* Data dos comentários */
font-size: 11px;
text-decoration:none;
color: #000; /* Cor do link */
text-align: right; /* Alinhamento do texto */
float: right;
}
.comment-content{ /* Código "de dentro" do bloco de comentários */
margin: 4px;
padding: 0 4px;
}
.comment-header{ /* Linha do nome do autor (Fundo) */
background-color: #f1f1f1; /* Cor de fundo */
font-size:18px;
border-bottom:1px solid #C0C0C0;  /* Cor da borda */
padding:5px;
}
.comment-header a{ /* Nome do autor do comentario (Fontes e cor) */
color: #000; /* Cor do link */
}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .comment-block{
margin-left: 46px; /* Espaço entre o avatar e o corpo do comentário*/
margin-top: 2px; /* Espaço de cima */
background: #fff; /* Fundo do bloco de comentários */
border: 1px solid #C0C0C0; /* Borda que fica em torno de todo o bloco */
}
.avatar-image-container{ /* Foto do "comentarista" (Tamanhos) */
width:50px !important; /* Mude a largura se preferir */
height:50px !important; /* Mude a altura se preferir */
max-width:58px !important; /* Nâo será necessário mexer */
max-height:58px !important; /* Nâo será necessário mexer */
}
.comments .avatar-image-container img{ /* Foto do "comentarista" (Personalizar) */
padding:1px;
border:1px solid #ccc;
background: #fff;
-moz-opacity: 0.73;
-khtml-opacity: 0.73;
opacity: 0.73;
filter:alpha(opacity=73); /* Se preferir retire */
-webkit-transition-duration: .10s;
}
.comments .avatar-image-container img:hover{ /* Personalizar hover */
-moz-opacity: 0.98;
-khtml-opacity: 0.98;
opacity: 0.98;
filter:alpha(opacity=98); /* Se preferir retire */
-webkit-transition-duration: .50s;
}
/* Não apague essa parte, deixe-a sem mexer */
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;
}

textsms      32 comentários

  1. Esse modelo é muito fofo >3<

    Até mais, www.b-urning.blogspot.com

    ResponderExcluir
  2. Serio vem feriado ai?que bom vai ter,você não é a unica cansada.Adorei esse tutorial é bem útil pra quem ainda sabe fazer,como eu -q

    s-impatie.blogspot.com.br | Simpatie ♡

    ResponderExcluir
    Respostas
    1. Vem sim (ノ´ヮ´)ノ*:・゚ Obrigada, Mai! ♥

      Excluir
  3. Quando tempo Mack, como é bom se deparar com um layout magnífico como esse, me sinto tão confortável aqui no TMR (๑・ω-)~♥ Não sei como, mas ficar muito tempo no computador está me deixando em um situação "angustiante", ando dormindo cedo também! Sobre o modelo, irei usar muito ♡

    Having Cherry ☁

    ResponderExcluir
    Respostas
    1. Pois é, Elo ♥ Awn, muito obrigada, viu?

      Excluir
  4. Bem legal. Aposto que vai ajudar muita gente, e aí n precisa ficar pegando modelos completos e com chance de ficar a mesma coisa das outras pessoas ou algo assim. : )

    s-adnessspring.blogspot.com

    ResponderExcluir
  5. Vai ser muito útil Mack, obrigada <33
    Feriado, tuts tuts HAHUSHAHUSHAHUS
    Já te coloquei na elite, me coloca ?
    Beijos e cheiros ~ ♥
    youheartsbyleticia.blogspot.com.br/

    ResponderExcluir
  6. AMEI! Posso usar em layout free? Com créditos, claro.

    ResponderExcluir
  7. Dormir? Eu vou aproveitar esse feriado é pra ficar acordada até o sol nasceu ashuashaushuhs adorei a base, bem útil, vou usar u333u ~creditando duuur~

    Royalty

    ResponderExcluir
  8. Estou muito ansiosa para o feriado *u* Necessito de uma pausa e descanso também, todos precisam né? Enfim, adorei o modelo, muito lindo >3<

    Letícia Evans | vidadeumasone.blogspot

    ResponderExcluir
  9. Eu ando muito cansada ultimamente também. Ultimamente não tenho vontade de fazer nada, nem de atualizar meu blog sinto vontade. Só sinto vontade de dormir e ouvir música, mais nada. Nesse feriado eu não poderei descansar o suficiente, vou viajar para a casa da minha tia e terei que ficar cuidando da minha prima mais nova T-T.
    Eu estava quase pedindo um tutorial desses sabia? IAHSUASHSAIUH. Eu não consigo personalizar os comentários, assim sozinha. Eu ja tive varias ideias mas nunca consegui coloca-las no HTML por não saber os códigos. Com esse seu tutorial será muito mais simples colocar essas minhas ideias no HTML *uu*.

    @P-Kpoppers

    ResponderExcluir
    Respostas
    1. Exatamente isso, Amy TmT Boa sorte com sua prima! Nhaw, que bom saber que ajudei em relação à isso, então ♥

      Excluir
  10. Mack sua lindja *ooo* adorei o modelo, com certeza vai me ajudar e muitas outras pessoas :3

    www.the-pic-tures.blogspot.com

    ResponderExcluir
    Respostas
    1. Awe, espero que sim! ♥ Obrigada Julie @u@

      Excluir
  11. Mack, estarei usando essa base no meu novo layout e darei os créditos, tudo bem? Ah, e o novo lay daqui está perfeito *u*

    htmlandresources.blogspot.com.br

    ResponderExcluir
  12. Awnn que lindo essa base para o modelo de comentário, amei unnie <3 Oremos para que passe logo o tempo até chegar o feriado -q

    Chu~ || @MyPinkOcean

    ResponderExcluir
    Respostas
    1. Awn, obrigada dongie! (⌒▽⌒)☆ Amém q

      Excluir
  13. Que modelo diwo! Agora estou de férias, estou sempre a dormir e a comer. >3<
    Até breve.

    http://tw-inkle.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Obrigada Nanami! Já? Não costumo ter férias no meio ou "começo" do ano, ah... Quem dera, visse? ♥

      Excluir
  14. O.O possu te matar? pode! eu termino de fazer o lay e vc me vem com uma base.... ai ai Mack ai ai -rum.. uahushau no proximo lay eu uso~~ -rum

    Voltamos neko visite || http://www.kawaii-things.net/

    ResponderExcluir
  15. Gostei do modelo, só não uso pois gosto muito do meu. Verdade, é tão bom você entrar no blog e ter pra atualizar assim de cara, muito bom rs ♥

    ResponderExcluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!

Este blog não é mais atualizado com novas postagens, mas não excluo 100% a probabilidade.