Tutorial - Modelo para área de comentários personalizado!

|| ||
 
Yoo, mina-san ~ ♥
 
Agora estou terminando de assistir Fairy tail (que foi outro anime que eu dei uma pausa), estou no episódio 137....ainda... mas eu ainda acabo o anime! Que é o que eu sempre digo quando eu vejo um anime, mas depois quando acaba um legal eu fico em depressão~ Vi que alguns blogs que eu gosto está em Hiatus, outros não foram atualizados e só mais uma coisa eu quero perguntar para vocês... mas o que porra aconteceu com vocês gente? Ainda não peguei o jeito do que aconteceu com vocês! Mas tudo bem, eu ainda vivo e não sujei e muito menos perdi meu coração para a esperança, e uma coisa que eu tenho dúvida é porque o Shoujo & Afins não volta mais a ativa? Qual será o problema? Ivy-chan morreu? (oO) ou será que está recomeçando para o blog não ficar chato ou esqueceu de deixar os telespectadores em "publico"?
 
Mas tudo bem, chega dessas minhas conversas, eu sei que antes de postar eu encho muito o post de doces, mas tentem tolerar tá bom? Hoje tenho um tutorial de área de comentários personalizados, é bem fácil, antes você vai precisar mexer nisso e aquilo mas vai passar o tempo rapidinho. Então depois disso você coloca o código,  é o mesmo modelo que eu uso no meu blog, um modelo "Elegante" que eu até que curti :) Bom, gente, vamos sem mais nem menos nem blá blá blá e sem perder tempo aos códigos? Só para deixar melhor ou caso eu troque de template, irei colocar um Preview ^-^

 1. Vá em seu HTML primeiramente e mude a corzinha do fundo cinza para a cor ou background que você usa na área de postagem. Para isso procure por: comments background e depois mude a cor da área de seu post no local destacado ().

2. Agora vamos ao código, procure por ]]></b:skin e acima cole o seguinte código:

/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/#comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px}#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}#comments h4,.comments .continue a{background:#d80556}#comments h4,.comments .user a,.comments .continue a{font-size:16px}#comments h4,.comments .continue a{font-weight:normal;color:#fff}#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}#comments .avatar-image-container img{border:0}.comment-thread{color:#111}.comment-thread a{color:#777}.comment-thread ol{margin:0 0 20px}.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://lh6.ggpht.com/-GDMurKK2tec/T5JCD6hoKoI/AAAAAAAABAc/COHOItBlFWk/author.png);width:36 px;height:36px}.comments .comments-content .inline-thread{padding:0 0 0 20px}.comments .comments-content .comment-replies{margin-top:0}.comments .comment-content{padding:5px 0;line-height:1.4em}.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}.comments .comment-thread.inline-thread .comment{width:auto}.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}.comments .comment-thread.inline-thread .comment-block{margin-left:48px}.comments .comment-thread.inline-thread .user a{font-size:13px}.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}.comments .continue{border-top:0;width:100%}.comments .continue a{padding:10px 0;text-align:center}.comment .continue{display:none}#comment-editor{width:103%!important}.comment-form{width:100%;max-width:100%}/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/
3. Visualize e se estiver tudo certo salve, acho que dá para entender as cores não é? ^-^' 
 
 
Fonte: Blog da Hino-chan; Sonho mais profundo // postagem

2 comentários:

  1. Olá ^^ Estou passando para avisar que a segunda etapa da competição que estou fazendo no MMME, ao qual vc está participando, começou ^^ Então chama seus amigos, parentes leitores para votarem e te ajudarem a ganhar \o/ Boa Sorte ^^
    Meu Mundo, Meu Estilo

    ResponderExcluir

- Requests tem de ser feito na minha Ask, mas não me importo de serem feitos pelos comentários.

- Não façam comentários merdosos, ex: Poha, lindo, vai te fuder, ou seja, os sem lógicas! Mas eu permitos gírias.

- Se quiser que eu retríbua é só pedir, deixando o link do seu blog!

- Aceito "seguindo, segue de volta?", não acho nada errado nisso!

- Eu leio e respondo todos os comentários possíveis!