Comentários Personalizados

Oi povo ;*
Tudo bem com vocês meus docinhos? Hehe, comigo está tudo bem.O quem tenho para falar do meu Natal? Bom, no dia 24 eu dei um "rolé" com minhas bests só para não ficar em casa sem fazer nada.No outro dia passei o dia inteiro com minha família, conversando, brincando, dando risadas, foi muito legal.Então, foi só isso kk.E o Natal de vocês, como foi? Quero saber hein?! É sempre bom compartilhar os bons momentos.Outra coisa, estou preparando um layout free super lindo para vocês, em breve irei postar.Ansiosos para ver?
Ok, agora vamos falar da postagem.Na postagem "Fazendo seu próprio menu" (a que vem antes da que eu estava desejando feliz natal), uma leitora me pediu para que eu postasse o tuto do modelo dos comentários que eu estou usando.Então, é o que eu vim fazer hoje.Mas como o modelo não é meu e sim do Blog The Moon Reverse, os devidos creditos deverão ir para lá.Agora que está tudo explicadinho, vamos começar o tutorial.


Está aí o pedido da leitora, agora vamos começar o tuto. (já falei isso antes né? kk) 

 1.Abra seu HTML, aperte Ctrl+f e pesquise pela tag /* Comments e apague todo o código. 
/* Comments
----------------------------------------------- */
#comments a {
  color: $(post.title.text.color);
}
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
  border-top: 1px solid $(post.title.text.color);
  border-bottom: 1px solid $(post.title.text.color);
}
.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}
.comments .continue {
  border-top: 2px solid $(post.title.text.color);
2.Após apagá-lo, cole no lugar o código abaixo:
/* Comments----------------------------------------------- */@font-face {font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');}.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 8px;color:#fff !important; /*--- cor da fonte do botão reply--- */text-align:center;text-decoration:none;background: #cedded; /*--- cor de fundo do botão reply--- */height:26px;font-size:8px; /* Tamanho da fonte */box-shadow: inset 0 0 5px #b3cfed, 0px 0px 2px #ededed;font-family: "silkscreen"; line-height:28px;font-weight:normal;cursor:pointer;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;}.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {text-decoration: none;background: #ffbec9; /*--- cor de fundo do botão reply--- */box-shadow: inset 0 0 5px #ffa2b2, 0px 0px 2px #ededed;}.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;}.COMMENTS .COMMENTS-CONTENT .ICON.BLOG-AUTHOR{POSITION:ABSOLUTE;TOP: -2PX;RIGHT: 160PX;MARGIN:0;BACKGROUND-IMAGE: URL(http://i.imm.io/1h1fp.png);WIDTH:31PX;HEIGHT:30PX;}@font-face {font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');}.comments .comments-content .datetime a{font-size:8px;font-family: "silkscreen";text-decoration:none; color:#fff; text-shadow: 1px 1px 0px #ff99aa; float: right;/* -- cor do link da data do comentário -- */}.comment-content{margin:0 0 8px;padding:0 5px;}.comments .comment-block{margin-left:65px;margin-right:95px;background:#fff; /* -- cor de fundo do comentário -- */border:1px solid #f0f0f0; /* --- cor da borda do comentário ---*/}.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */background-color:#ffbec9; /*--- cor de fundo--- */font-size:18px;border-bottom:1px solid #ff99aa; /*--- cor da borda --- */box-shadow: inset 0 0 8px #ffa3b3;padding:7px;text-transform: uppercase;}@font-face { font-family: "laugh"; src: url('http://static.tumblr.com/vhsz9rv/zrcmruahi/livelaughlove.ttf');}.comment-header a{color: #fff; /*--- cor do link nome do autor do comentario --- */font-family: 'Economica', sans-serif;font-size: 22px; /* tamanho da fonte */font-style: normal;font-weight: 300;text-shadow: 1px 1px 0px #ff99aa;}.comments .comments-content .owner-actions{position:absolute;right:0;top:0}.comments .comments-replybox{border:none;height:230px;width:100%}.comments .comment-replybox-thread{margin-top:0}.comments .comment-replybox-single{margin-top:5px;margin-left:48px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px;}.avatar-image-container{margin-left: 18px;border-radius:4px;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}.comments .avatar-image-container img{padding:2px;border:1px solid #e7e7e7;width:35px !important;height:35px !important;max-width:45px !important;max-height:45px !important;border-radius:4px;-moz-transition: all  1s ease-out;-webkit-transition: all  1s ease-out;-o-transition: all  1s ease-out;-ms-transition: all  1s ease-out;transition: all  1s ease-out;}.comments .avatar-image-container img:hover{opacity:0.7;-moz-transition: all  1s ease-out;-webkit-transition: all  1s ease-out;-o-transition: all  1s ease-out;-ms-transition: all  1s ease-out;transition: all  1s ease-out;
 Pronto! Agora só editar como quiser, senão, não precisa mexer em nada.Depois salve.

Espero que tenham gostado.Tchau!

10 comentários:

  1. Meu natal foi uma decepção total :c
    Que modelo de comentários lindo , estava procurando um assim mais não achei :/ .

    Kisses :*

    s-noowing.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Sério? Poxa :/. É sim, muito kawaii.
      Kiss!

      Excluir
  2. Adorei, esse modelo é lindo mesmo.
    Feliz natal Lavíh-chan~
    Não esquece de ler o último post do meu blog (eu comentei de você lá ><).
    Beijo beijo~

    The Secret Wonderland

    ResponderExcluir
    Respostas
    1. Obrigada, é mesmo muito lindo.Claro Vey-Chan, obrigada ^.^
      Kiss!

      Excluir
  3. Eu gosto muito de personalizar os comentários, e amei esse modelo, foi um dos mais fofos que vi *u*

    htmlandresources.blogspot.com

    ResponderExcluir
  4. Amei, ainda não personalizei o meu >_< me inspirou a fazer isso haha
    beijão

    guitarrebel.blogspot.pt

    ResponderExcluir

-Não aceito palavrões.
-Não faça ofensas ao blog, só aceito critícas caso elas forem construtivas ao blog.
-Não comente apenas com um "seguindo, segue de volta?".
-Faça um comentário sobre a postagem lida.
-Deixe o link do blog no fim do comentário, assim poderei retribuir o carinho.