Ai como é bom voltar!
Como vão vocês? Ja estou de volta e espero que seja pra ficar mesmo, né?
Hoje trouxe mais um jeito de personalizar a área dos comentários. Ficou simples, porém cute, e fácil de fazer.
Eu estava lá mexendo nos códigos e foi saindo, espero que gostem. Lets go...
Ficou assim: (desculpem pela qualidade da imagem)
(Click)
Para saber como faz, basta ler abaixo.
Procure por #comments { e tecle enter duas vezes pois os dois primeiros que aparecer ficarão do mesmo jeito.
Assim que fizer o que se pede apague todo o código, que vai até .comments .continue { (antes de /* Widgets ). Você deve adicionar o código abaixo no lugar deste:
/**Área do comentários desenvolvida por Luiz Gustavo (BANGTEEN.BLOGSPOT.COM). Dê os devidos créditos**/+ Obrigado por me ajudar na meta. 300 seguidores, puxa. Obrigado mesmo. Novo layout em breve pra vocês, dessa vez da Christina Aguilera.
#comments {
border: 1px dotted #ccc; /**borda em volta da área**/
border-radius: 6px;
padding: 15px;
}
#comments .comment-author {
padding-top: 1.5em;
}
/**Numero de comentários**/
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: #cd5c5c;
text-align: center;
font-family: tahoma;
text-transform: uppercase;
font-size: 16px;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
/**Imagem do comentário**/
.avatar-image-container {
margin: .2em 0 0;
border: 2px solid #cd5c5c;
-moz-border-radius: 1em 3em 1em 4em; border-radius: 1em 3em 1em 3em;
}
/* Comments
----------------------------------------------- */
#comments a { /**Links**/
color: #cd5c5c;
font-family: tahoma;
text-transform: uppercase;
border-bottom: 1px dotted #707070;
text-align: center;
}
#comments a:hover { /**hover dos links**/
color: #000;
text-decoration: none;
cursor: help;
border-bottom: 1px dotted #cd5c5c;
}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcS1zLpdB1doLJS7iCXLLf_WhoCHGN2lh790NyKvZV28W-C1nz5J7w);
}
.comments .comments-content .loadmore a {
border-top: 1px dotted #707070;
border-bottom: 1px dotted #707070;
}
.comments .comment-thread.inline-thread {
background: #eee; /**cor de fundo da resposta**/
border: 1px dotted #ccc;
border-radius: 6px;
color: #707070;
}
.comments .continue {
border-top: 1px dotted #707070; /**bordas gerais**/
}
/**Fim do código**/
Adorei o código, ficou muito lindo :)
ResponderExcluirAinda bem que voltou Luiz, tive saudades.
CAT GIRL
Fiquei muito feliz com sua volta, Luiz! É pra ficar mesmo, né? Hehe... Tutorial perfeito, andava a procura de um assim já há algum tempo, com essa opção de resposta logo abaixo e tudo mais. Acho que vou usar no lay que estou planejando para o Jeito Único!
ResponderExcluirBeijos ♥ Jeito Único
Ficou muito bonito Luiz, você sempre acaba divando u3u
ResponderExcluirAcho que irei usar esse código no meu próximo template. Senti muitas saudades ♥
http://blog-bluesky.blogspot.com.br/
Adorei *-----* O resultado fica lindo!!
ResponderExcluirBjs
Escrita de Cabeceira --> Perfil
Adorei o tutorial! Ficou lindo o resultado. *u*
ResponderExcluirEstou louca pra ver o novo layout IWOEIWOEI' Parabéns pela meta de 300 seguidores! <3
Designer Lovers
Adorei o tutu , meus comentários já são personalizados !
ResponderExcluirhttp://mr-kawaii.blogspot.com.br/
Se meus comentários não já estivesse personalizado, eu usaria pois é lindo desse jeito que você ensinou.
ResponderExcluirgarotadifferente.blogspot.com
Eu goste do tutorial!
ResponderExcluirmas curto deixar área dos comentários simples, apesar de, do jeito que você ensinou, também ficar simples e lindo!
Kisses <3
Meu jardim Secreto (ou clique no perfil)
Lindo esse jeitinho de personalizar os comentários, adorei, de verdade!!
ResponderExcluirAnciosa para ver como vai ficar o novo layout *-*
Beijos <3
pqngarota.tk
Fica muito lindo ^^
ResponderExcluirPode me ajudar? Meu blog Universe Chic foi hackeado recentemente e estou recomeçando
Kisses ^^
Omg, fico muito bonito ! Vou usar quando fazer algum Layout Free, salvei nos favoritos :3 Beijos
ResponderExcluirwehearthtml.blogspot.com
Adorei o tutorial, é sempre muito útil! E ficou lindo *o*
ResponderExcluirAmei que tenha voltado, também voltei agora hahaha!
Beijos,
depoisdeveneza.blogspot.com.br
Ameeeei! Com certeza vou usar no próximo layout. Já salvei nos favoritos! Quando tiver vaga pra afiliados, me avisa? ><
ResponderExcluirKeepThisDream.blogspot.com
Gaga♥♥ Ótimo tutorial, eu personalizo mas só troco o fundo por preguiça mesmo o3o'
ResponderExcluirChu♥~
mutant-paradise.blogspot.com
Ficou muito lindo, eu estava mesmo querendo personalizar a área de comentários do meu blog, vou tentar fazer lá, mas colocarei os créditos, tá? *-*
ResponderExcluirBeijocas, I'm Fucking a Zombie. @pfvrsah (instagram)
Ficou suuper fofo, parabéns :3 Acho que vou usar ele no próximo lay do meu blog :)
ResponderExcluirTem um tempinho? Eu e mais 5 amigos criamos um novo blog, para tentar melhorar a blogosfera, mas apenas 6 pessoas não vai dar. Gostariamos muito da sua visita ^.^
Vai visitar? Se gostar e concordar com a nossa ideia, siga, comente e ganhe 6 seguidores em troca :)
bigexplosion-original.blogspot.com
Lindo o efeito!!
ResponderExcluirSegue se gostar?
garotadabolsa.blogspot.com
Muito obrigada >.<
ResponderExcluirDemorei muito para achar um estilo como esse , ficou muito lindo :D
Obs.:Apaixonei pelo layout .