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!
Arigatou Lavih-chii *u*
ResponderExcluirDe nada :)
ExcluirKiss!
Meu natal foi uma decepção total :c
ResponderExcluirQue modelo de comentários lindo , estava procurando um assim mais não achei :/ .
Kisses :*
s-noowing.blogspot.com.br
Sério? Poxa :/. É sim, muito kawaii.
ExcluirKiss!
Adorei, esse modelo é lindo mesmo.
ResponderExcluirFeliz 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
Obrigada, é mesmo muito lindo.Claro Vey-Chan, obrigada ^.^
ExcluirKiss!
Eu gosto muito de personalizar os comentários, e amei esse modelo, foi um dos mais fofos que vi *u*
ResponderExcluirhtmlandresources.blogspot.com
Realmente é muito fofo ^.^
ExcluirKiss!
Amei, ainda não personalizei o meu >_< me inspirou a fazer isso haha
ResponderExcluirbeijão
guitarrebel.blogspot.pt
Obrigada! Haha, que bom.
ExcluirKiss!